DEV Community

Asim Shrestha
Asim Shrestha

Posted on

Vue3 + Vite + Boostrap 5 + Sass Setup

1: Installing Vue3 using Vite



> npm init vue@latest


Enter fullscreen mode Exit fullscreen mode
  • 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:

Image description

Image description

2: File cleanup & Display simple Hello World!



> rm -r src/assets/
> rm -r src/components/

Enter fullscreen mode Exit fullscreen mode


<!-- src/App.vue -->
<template>
<h1>Hello World!</h1>
</template>

Enter fullscreen mode Exit fullscreen mode




3: Install Boostrap 5 & Setup




> npm install bootstrap

Enter fullscreen mode Exit fullscreen mode


// 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";

Enter fullscreen mode Exit fullscreen mode




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>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
jaro17 profile image
jaro17

Where do I set global variables?

Collapse
 
jaro17 profile image
jaro17

Where do I set global variables?

Collapse
 
parajuliudip profile image
parajuliudip

Thank you

Collapse
 
fininhors profile image
Francisco Junior

Thanks for share with us. Great job.