How to Set up a Vue app with Vite, SASS, Vue Router, Bootstrap, and other goodies.

I’ve been getting up to speed on Vue 3 and Vite. There are a lot of differences from Vue 2 and the Vue CLI — even just spooling up a new project . This article runs through a super simple setup to get you going with all the core stuff.

Photo by Caleb George on Unsplash

*This article assumes you have node and npm installed on your machine. If not download/install the LTS version of node, and the latest version of npm.

Here we go

Start by installing Vite — run this in your terminal:

npm init vite@latest

This will prompt you with a bunch of choices for your setup:

✔ Project name: … your-super-duper-vite-app-name

Framework of choice:

? Select a framework: › — Use arrow-keys. Return to submit. 
  Vanilla
❯ Vue
  React
  Preact
  Lit
  Svelte

Select a variant. For the best customizing experience, select Customize with create-vue:

? Select a variant: › — Use arrow-keys. Return to submit.
 JavaScript
 TypeScript
❯ Customize with create-vue
 Nuxt

The selections below are my preferences, but you can choose what works for you:

✔ Select a variant: › Customize with create-vue
Vue.js - The Progressive JavaScript Framework
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Pinia has replaced Vuex as the official state management library for Vue. It works with Vue 2 and 3, and both the options and composition APIs.

cd into the project folder, install npm, and run your dev server:

Done. Now run:
cd vite-app
npm install
npm run dev

SASS

For SASS, LESS, or stylus support, you have to install node-sass manually (I use SASS — see below for Bootstrap specific notes on installing SASS):

# .scss and .sass 
npm add -D sass
# .less 
npm add -D less
# .styl and .stylus 
npm add -D stylus

Check here for Vite docs on CSS preprocessors.

Bootstrap 5

With the latest version 5 of Bootstrap, there is no jQuery so it can be used directly in a Vue project without the need for a wrapper or other library like BootstrapVue (which is admittedly awesome). I like this for the ability to use the latest Bootstrap classes and components, and for keeping your stack current (as of this writing BootstrapVue uses Bootstrap version 4*).

To install (from the Bootstrap docs under Vite):

npm i --save bootstrap @popperjs/core

Then Install additional SASS dependency. We need another dependency (Sass) to properly import and bundle Bootstrap’s CSS:

npm i --save-dev sass

Now create an SCSS folder and add a styles.scss file inside it to import Bootstrap’s CSS. The complete path will be:

./assets/scss/styles.scss

Then in styles.scss, import all of Bootstrap’s CSS/SASS files with:

@import "~bootstrap/scss/bootstrap";

And import this into your project by going into your main.js file and adding:

import "bootstrap/dist/css/bootstrap.min.css"
import "./assets/scss/styles.scss"

*An important note that I missed the first time around with this setup: you have to add a few lines in vite.config.js to set up Bootstrap’s SASS import for Vite to find your Bootstrap’s SASS files in node_modules:

// Add this to your vite.config.js:
// const path = require('path')
// '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
    }
  }
})

Finally, add the Bootstrap JS components to your Vue project entrypoint (ie: src/main.js):

import "bootstrap"

// So your total Bootstrap import statement will be:
import "bootstrap/dist/css/bootstrap.min.css"
import "./assets/scss/styles.scss"
import "bootstrap"

*Great stackoverflow post here on Bootstrap 5 installation and usage tips.
**Check the Bootstrap Vite docs here.

Conclusion

And that’s it! The Vite experience in my opinion is pretty awesome: it’s fast, easy, and the lightning dev server that everyone’s talking about is worth it alone. Hopefully this short guide gets you set up quickly so you can start building.