|
1 | | -# Vue 3 Bootstrap Starter |
2 | | - |
3 | | -🦾 Starter boilerplate with Vue 3 & Bootstrap. |
4 | | -📦 Vue 3, Bootstrap 5, Vue-Router, Pinia, Sass/Scss, ESLint |
5 | | -⌚ Last update: 1/05/2024 |
6 | | - |
7 | | - |
| 1 | +# 🦾 Vue 3 Bootstrap Starter |
| 2 | + |
| 3 | +A modern boilerplate built with Vue 3 and Bootstrap 5. Includes Vue-Router, Pinia, Sass/SCSS, and ESLint — everything you need to kickstart your Vue project. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +## ✨ Features |
| 8 | + |
| 9 | +- 📦 Vue 3 + Vite setup |
| 10 | +- 🛣️ Vue-Router for navigation |
| 11 | +- 🗂️ Pinia for state management |
| 12 | +- 🎨 Bootstrap 5 for responsive UI |
| 13 | +- 🎨 Sass/SCSS support |
| 14 | +- ✅ ESLint for code quality |
| 15 | + |
| 16 | +## 📁 Project Structure |
| 17 | + |
| 18 | +```plaintext |
| 19 | +├── public/ |
| 20 | +│ └── index.html |
| 21 | +├── src/ |
| 22 | +│ ├── assets/ |
| 23 | +│ ├── components/ |
| 24 | +│ ├── router/ |
| 25 | +│ │ └── index.js |
| 26 | +│ ├── store/ |
| 27 | +│ │ └── index.js |
| 28 | +│ ├── styles/ |
| 29 | +│ │ └── main.scss |
| 30 | +│ ├── App.vue |
| 31 | +│ └── main.js |
| 32 | +├── package.json |
| 33 | +├── vite.config.js |
| 34 | +└── .eslintrc.js |
| 35 | +``` |
8 | 36 |
|
9 | | -## Getting Started |
| 37 | +## 🚀 Getting Started |
10 | 38 |
|
11 | | -Clone project and enter in folder: |
| 39 | +### 1. Clone the Repository |
12 | 40 |
|
13 | | -``` |
| 41 | +```bash |
| 42 | +git clone https://github.com/your-username/vue-bootstrap-starter.git |
14 | 43 | cd vue-bootstrap-starter |
15 | 44 | ``` |
16 | 45 |
|
17 | | -Run npm install: |
| 46 | +### 2. Install Dependencies |
18 | 47 |
|
19 | | -``` |
20 | | -npm i |
| 48 | +```bash |
| 49 | +npm install |
| 50 | +# or |
| 51 | +pnpm install |
21 | 52 | ``` |
22 | 53 |
|
23 | | -Enjoy: |
| 54 | +### 3. Start the Development Server |
24 | 55 |
|
25 | | -``` |
| 56 | +```bash |
26 | 57 | npm run serve |
| 58 | +# or |
| 59 | +pnpm dev |
27 | 60 | ``` |
28 | 61 |
|
29 | | -## Built With |
| 62 | +The app will be available at [http://localhost:5173/](http://localhost:5173/). |
| 63 | + |
| 64 | +## 🎨 Customization |
| 65 | + |
| 66 | +- Update `src/styles/main.scss` to override Bootstrap variables and add custom styles. |
| 67 | +- Add new routes in `src/router/index.js`. |
| 68 | +- Manage global state with Pinia in `src/store/`. |
| 69 | + |
| 70 | +## 📦 Building for Production |
| 71 | + |
| 72 | +```bash |
| 73 | +npm run build |
| 74 | +# or |
| 75 | +pnpm build |
| 76 | +``` |
| 77 | + |
| 78 | +The production-ready files will be generated in the `dist/` directory. |
| 79 | + |
| 80 | +## 🚀 Deployment |
| 81 | + |
| 82 | +Deploy the `dist/` directory to your preferred platform: |
| 83 | + |
| 84 | +- [Vercel](https://vercel.com/) |
| 85 | +- [Netlify](https://www.netlify.com/) |
| 86 | +- [GitHub Pages](https://pages.github.com/) |
| 87 | +- [Cloudflare Pages](https://pages.cloudflare.com/) |
| 88 | + |
| 89 | +## ❓ FAQ |
| 90 | + |
| 91 | +### Why use this starter? |
| 92 | + |
| 93 | +It combines Vue 3, Bootstrap 5, and Pinia with a ready-to-go structure for rapid development. |
| 94 | + |
| 95 | +### Can I replace Bootstrap? |
30 | 96 |
|
31 | | -- [Vue CLI](https://cli.vuejs.org/) - Standard Tooling for Vue.js Development |
32 | | -- [Vue-Router](https://router.vuejs.org/) - Vue Router is the official router for Vue.js. |
33 | | -- [Pinia](https://router.vuejs.org/) - Pinia is the best state management for Vue.js. |
34 | | -- [Bootstrap](https://getbootstrap.com/) - Build responsive, mobile-first projects on the web with the world’s most popular front-end component library. |
| 97 | +Yes, you can swap Bootstrap with TailwindCSS or another UI library by updating `main.scss`. |
35 | 98 |
|
36 | | -## Versioning |
| 99 | +### Does it support TypeScript? |
37 | 100 |
|
38 | | -We use [SemVer](http://semver.org/) for versioning. |
| 101 | +You can enable TypeScript by renaming `.js` files to `.ts` and updating `vite.config.js`. |
39 | 102 |
|
40 | | -## Authors ✨ |
| 103 | +## 👨💻 About the Creator |
41 | 104 |
|
42 | | -- **guillaumeduhan** - _Initial work_ - [Github](https://github.com/guillaumeduhan) |
| 105 | +I'm Guillaume Duhan, CTO & indie builder. I've launched many projects using Vue, and this starter is a solid foundation for building modern Vue apps quickly. |
43 | 106 |
|
44 | | -## License |
| 107 | +## 📎 License |
45 | 108 |
|
46 | | -This project is licensed under the MIT License. |
| 109 | +This project is licensed under the [MIT](LICENSE). |
0 commit comments