Today we are going to create a Vue project using Vite and add three different Component Libraries, Vuetify, Bootstrap 5, and Quasar. We will not be using vue-cli to create any of the projects. We will instead be using Vite. As of writing this, there were not any vue templates for some of these libraries.

Prereq:

Node Version: 16.17.0

NPM Version: 8.15.0

Vuetify

As of writing this Vuefity is compatible with Vue 3 (the default version installed above). So we have to down-grade Vue to Vue 2, install some compatibility plugins, and change some configuration syntax. If this isn’t something you care to do, skip to the other two options below.

Code:

npm init vue@2

// create a project name

// Select Yes for TypeScript

// Select the rest as they apply to you

cd vue-vuetify // or your project name

npm install

At this point you can run `npm run dev` to make sure everything is working.

Installing Vuetify

npm install vuetify

After installing there are some modifications and files we need to create.

First create a plugins folder under `src`.

In there create file called `vuetify.ts` with the following:

import Vue from ‘vue’;

import Vuetify from ‘vuetify’;

import ‘vuetify/dist/vuetify.min.css’;

Vue.use(Vuetify);

const opts = {};

export default new Vuetify(opts);

Under `main.ts` add the following:

new Vue({

  vuetify,

  render: (h) => h(App),

}).$mount(‘#app’);

Using Vuetify

Next we are going to remove the main.css file and use Vuetify Components to recreate the default Vue style.

App.vue

1. Change the div blocks on line 7 and 19 from <div id=”app”> to <v–app>. When you reload the app you’ll see that it loads but the styling is off.
2. Inside v-app, wrap everything in a v-main div.

Next we are going to create a component for the header div.

Congrats.vue

1. Create a file called Congrats.vue in the Components folder
2. In the script block import the HelloWorld component
3. In the template block cut the header from App.vue and paste it here
4. Change the <header> to <div>
5. Cut the style block from App.vue and paste it under the template block
6. Change header to div in the css.

Code:

<script setup lang="ts">
 import HelloWorld from './HelloWorld.vue';
</script>
<template>
 <div>
   <img
     alt="Vue logo"
     class="logo"
     src="../assets/logo.svg"
     width="125"
     height="125"
   />

   <div class="wrapper">
     <HelloWorld msg="You did it!" />
   </div>
</div>
</template>
<style scoped>
 div {
   line-height: 1.5;
 }

 .logo {
   display: block;
   margin: 0 auto 2rem;
 }

 @media (min-width: 1024px) {
   div {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }

   .logo {
     margin: 0 2rem 0 0;
   }

   div .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
 }
</style>

App.vue

Back in App.vue

1. Remove the HelloWorld import and import the Congrats.vue component.
2. Add Congrats tag before TheWelcome
3. Add class=”d-flex align-content-center flex-wrap” to v-main tag
4. Wrap everything under main in v-container fluid
5. Put the Congrats and TheWelcome in a v-row
6. Separate Congrats and TheWelcome in v-col cols=”6” align-self=”center”

Code:

<script setup lang="ts">
 import Congrats from './components/Congrats.vue';
 import TheWelcome from './components/TheWelcome.vue';
</script>

<template>
 <v-app>
   <v-main class="d-flex align-content-center flex-wrap">
     <v-container fluid>
       <v-row>
         <v-col cols="6" align-self="center">
           <Congrats />
         </v-col>
         <v-col cols="6" align-self="center">
           <TheWelcome />
         </v-col>
       </v-row>
     </v-container>
   </v-main>
 </v-app>
</template>

Congrats.vue

1. Wrap all divs in a v-row class=”fix” no-gutters
2. Rename the div in style to fix
3. Remove the media css block
4. Remove the .logo block
5. Wrap the img and HelloWorld div in v-col
6. The img v-cols as attrs cols=”4” class=”d-flex justify-center”

<script setup lang="ts">
 import HelloWorld from './HelloWorld.vue';
</script>
<template>
 <v-row class="fix" no-gutters>
   <v-col cols="4" class="d-flex justify-center">
     <img
       alt="Vue logo"
       src="../assets/logo.svg"
       width="125"
       height="125"
     />
   </v-col>

   <v-col>
     <HelloWorld msg="You did it!" />
   </v-col>
 </v-row>
</template>
<style scoped>
 .fix {
   line-height: 1.5;
 }
</style>

Lamar McAdory

Frontend software developer at CollabraSpace.