Beginning a Vue project with your favorite Component Library: Part 1
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
- 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.
- Inside v-app, wrap everything in a v-main div.
Next we are going to create a component for the header div.
Congrats.vue
- Create a file called Congrats.vue in the Components folder
- In the script block import the HelloWorld component
- In the template block cut the header from App.vue and paste it here
- Change the <header> to <div>
- Cut the style block from App.vue and paste it under the template block
- 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
- Remove the HelloWorld import and import the Congrats.vue component.
- Add Congrats tag before TheWelcome
- Add class=”d-flex align-content-center flex-wrap” to v-main tag
- Wrap everything under main in v-container fluid
- Put the Congrats and TheWelcome in a v-row
- 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
- Wrap all divs in a v-row class=”fix” no-gutters
- Rename the div in style to fix
- Remove the media css block
- Remove the .logo block
- Wrap the img and HelloWorld div in v-col
- 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>