Vue 3 + Vite + BootstrapVueNext Project Template

This project template offers a solid starting point for creating modern web applications with Vue 3, Vite, and Bootstrap. It includes pre-configured routing, styling with Bootstrap, and utilizes Vite for a fast development experience and optimized production builds.

Features

• Vue.js 3: Built with the latest version of Vue.js.
• Vue Router: Pre-configured for client-side routing and navigation.
• UI Library: Pre-configured with Bootstrap 5.
• BootstrapVueNext: Seamless integration with Bootstrap 5 using BootstrapVueNext components.
• Styling: Ready to use with Bootstrap 5 and BootstrapVueNext for creating responsive and stylish user interfaces.
• Linting: ESLint and Prettier for consistent code style.
• Testing: Vitest is configured for unit and component testing.
• Development Server: Hot Module Replacement (HMR) for a seamless development experience.
• Build: Optimized for production with Vite.

Getting Started

1. Clone the Repository:

   git clone <repository-url>
   cd <project-directory>

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

4. Run Tests

   npm run test:unit

Project Structure

vue-template-project/
├── public/            # Static assets
├── src/               # Source code
│   ├── assets/        # Images, fonts, etc.
│   ├── components/    # Reusable Vue components
│   ├── layouts/     # App layout components
│   ├── router/        # Vue Router configuration
│   ├── stores/       # Pinia state management
│   ├── plugins/ #Vue plugins
│   ├── views/         # Page-level components
│   ├── App.vue        # Main application component
│   └── main.js        # Entry point
├── .eslintrc.cjs      # ESLint configuration
├── .prettierrc.cjs    # Prettier configuration
├── vite.config.js     # Vite configuration
├── index.html         # Template HTML file
├── package.json       # Project dependencies
└── README.md          # Project documentation

Customization

• Components: Add your custom components in the src/components directory.
• Layouts: Create new layouts in the src/layouts folder.
• Views: Create new views (pages) in the src/views directory.
• Routes: Define new routes in src/router/index.js.
• State: Add state stores in src/stores.
• Plugins: Add new vue plugins to src/plugins and remember to register them in the main.js
• Configuration: Modify vite.config.js, .eslintrc.cjs, and .prettierrc.cjs as needed.

Building for Production

npm run build

This will create an optimized production build in the dist directory.

Contributing

If you'd like to contribute, please fork the repository and submit a pull request.