Vue3 + Vite + Boostrap 5 + Sass Setup

#vue #vite #boostrap5 #sass

1: Installing Vue3 using Vite



> npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.
You will be presented with prompts for a number of optional features such as TypeScript and testing support:

Browser url: http://localhost:3000/

2: File cleanup & Display simple Hello World!



> rm -r src/assets/

> rm -r src/components/



<!-- src/App.vue -->

<template>

  <h1>Hello World!</h1>

</template>

3: Install Boostrap 5 & Setup



> npm install bootstrap



// src/main.js

import { createApp } from "vue";

import App from "./App.vue";

import "bootstrap/dist/css/bootstrap.css";

createApp(App).mount("#app");

import "bootstrap/dist/js/bootstrap.js";

4: Sass Setup

Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed: ```sh

npm install -D sass





&lt;!-- src/App.vue --&gt;
&lt;template&gt;
  &lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/template&gt;

&lt;style lang="scss"&gt;
h1 {
  color: green;

  &amp;:hover {
    color: greenyellow;
  }
}
&lt;/style&gt;


</code></pre></div><h3>
  <a name="done" href="#done">
  </a>
  Done!!!
</h3>