How to create a vue3 project
Vue3 is the newest version of vue.js. It comes backed with vite, options and composition API, many improvements with DX. In short, an amazing base for your next Project!
If you think you should catch up a little on it, I could highly recommend the course:
Vue - The Complete Guide (incl. Router & Composition API) * by Maximilian Schwarzmüller. This is the course I learned vue with, and in my opinion the best course out there to learn vue. It is completely updated for vue3.
To make this article fit for all editor choices, I will use the CLI to create the project.
To set up your vue3 project run
npm init vue@latest
In Your desired folder, note that a folder with your project name will be created inside this folder!
You will be asked if you like to install the newest vue CLI if you do not have it already.
Next, you will be guided through some steps to set up the project correctly.
I will briefly explain all the vue 3 installation steps to you.
✔ Project name: vue3vuetifytemplate // Your desired project name.
✔ Package name: … vue3vuetifytemplate // your desired package name
✔ Add TypeScript? … No / Yes // if you prefer using TypeScript, this decision is up to you, but I suggest you're using TypeScript. Once learned, you will get a massive productivity boost! Also, your code will be easier to read and understand
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes // vue-router is the spa router package for vueJS, it makes it easy to add navigation to your SPA (single page application)
✔ Add Pinia for state management? … No / Yes // pinia is the vue3 state management library, like vuex was for vue 2, Pinia is simply amazing, you should add it!
✔ Add Vitest for Unit Testing? … No / Yes // just say yes, vitest is a superfast unit test runner based on vite.
If you wish to learn more about it, check out this article.
✔ Add an End-to-End Testing Solution? › Playwright // playwright is a Multiplatform e2e test runner by Microsoft. Cypress is also Ok, but we recently moved from cypress to playwright since it provides multi browser and platform support, auto waits, better state management and many more useful features.
✔ Add ESLint for code quality? … No / Yes // ESLint is an incredible tool to automatically analyze your code and ensure a good quality and use of best practices.
✔ Add Prettier for code formatting? … No / Yes // prettier auto formats your code so that it will be prettier and more readable to you and your colleagues.
Then run
cd vue3VuetifyTemplate
npm install
npm run lint
npm run devTo spin up the vite server and make your vue 3 app available on the prompted port.
The first big difference to vue 2 is that start up will take less than a minute, since vue 3 is vite powered.
You will now see the beautiful landing page of vue 3! Now it is time to set up vuetify 3.
Using vuetify with vue 3
To install vuetify 3 in your vue 3 project, run:
npm install vuetify@next
This will give you the latest version of vuetify 3, by now 28. Dezember 2022 a normal install would still install vuetify 2.
In your main.ts paste the following code:
// set up vuetify with theme and icons
// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const vuetify = createVuetify({
components,
directives,
});
app.use(vuetify);Amazing! Now run npm run dev again, and you will see the same as before.
To change that, let us create a basic vuetify component that will be displayed in our app.vue
This will also be an amazing vuetify example to get started.
In your components folder, create a new file. Called helloVuetify.vue.
We will make our lives simple and just use the twitter card from the vuetify docs.
Feel free to copy this code into your helloVuetify.vue file.
And to verify the Installation, we will add a simple card on top of our welcome screen.
<script setup lang="ts">
defineProps<{}>();
</script>
<template>
<v-card
class="mx-auto"
color="#26c6da"
theme="dark"
max-width="400"
prepend-icon="mdi-twitter"
title="Twitter"
>
<template v-slot:prepend>
<v-icon size="x-large"></v-icon>
</template>
<v-card-text class="text-h5 py-2">
"Turns out semicolon-less style is easier and safer in TS because most
gotcha edge cases are type invalid as well."
</v-card-text>
<v-card-actions>
<v-list-item class="w-100">
<template v-slot:prepend>
<v-avatar
color="grey-darken-3"
image="<https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light>"
></v-avatar>
</template>
<v-list-item-title>Evan You</v-list-item-title>
<v-list-item-subtitle>Vue Creator</v-list-item-subtitle>
<template v-slot:append>
<div class="justify-self-end">
<v-icon class="mr-1" icon="mdi-heart"></v-icon>
<span class="subheading mr-2">256</span>
<span class="mr-1">·</span>
<v-icon class="mr-1" icon="mdi-share-variant"></v-icon>
<span class="subheading">45</span>
</div>
</template>
</v-list-item>
</v-card-actions>
</v-card>
</template>Then call the component in your app.vue
<script setup lang="ts">
…some imports
import HelloVuetify from "./components/helloVuetify.vue";
</script>
…some vue code in your template
<hello-vuetify />
When the installation was successful, you should see something like this:
The card we’ve created in our example is already displayed well, but the icons are missing.
This leads us to the next step. Configure vuetify 3.
How to configure Vuetify 3
The configuration process is very similar to my other guide on setting up vuetify3 with Nuxt 3. However, for the sake of completeness, I will also explain it in this article.
One thing I like about Vuetify is its clean global configuration.
This also works with Vuetify 3, the concepts are the same, but the syntax is slightly different since also the vue3 syntax has moved on.
How to change the global Theme in Vuetify 3
If you would like to set the dark theme as default, you can do this easily in the configuration.
Put this into `createVuetify({` to enable the dark theme as the default theme
theme: {
defaultTheme: 'dark'
}Or you can also create your own custom themes.
Just adapt your vuetify creation in your main.ts like following:
const myAllBlackTheme: ThemeDefinition = {
dark: false,
colors: {
background: "#000000",
surface: "#000000",
primary: "#000000",
"primary-darken-1": "#000000",
secondary: "#000000",
"secondary-darken-1": "#000000",
error: "#000000",
info: "#000000",
success: "#000000",
warning: "#000000",
},
};
const vuetify = createVuetify({
theme: {
defaultTheme: "myAllBlackTheme",
themes: {
myAllBlackTheme,
},
},
components,
directives,
});
app.use(vuetify);How to add Icons in Vuetify 3
By default, you can choose the well-known fonts: Material Design Icons (mdi), Material Icons(mi), Font Awesome 4(fa4), and Font Awesome 5(fa5).
To add a font to vuetify simply import the wished font from the icon sets directory and introduce it to vuetify in the exports.
Vuetify Icons not shown, how to resolve
It could happen that your Icons will not appear after you added them.
I also had this issue when trying this out for the first time.
To fix Vuetify icon's not shown error, make sure to install the corresponding font and add its CSS to your plugin config.
I will show you how to do this based on using font awesome and mdi as a default icon font.
This also applies if you want to install custom fonts!
Install the fon`
npm install @fortawesome/fontawesome-free -D
npm install @mdi/fontIn your main.ts import the specific CSS file`
import "@mdi/font/css/materialdesignicons.css";
import "@fortawesome/fontawesome-free/css/all.css";Make sure you are using a CSS loader. `
import "vuetify/styles";
import { createVuetify, type ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { fa } from "vuetify/iconsets/fa";
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
import "@fortawesome/fontawesome-free/css/all.css"; // Ensure your project is capable of handling css files
const vuetify = createVuetify({
theme: {
defaultTheme: "dark",
},
icons: {
defaultSet: "mdi",
aliases,
sets: {
mdi,
fa,
},
},
components,
directives,
});
app.use(vuetify);In the above snippet, I use font-awesome as my default icon font and mdi as an additional font.
Back at our example, we will now see the twitter card as expected, with some beautiful icons.
The twitter card should look like this:
Gotchas
If your Icons are not shown, first try a rebuild.
If the problem still persists, make sure you have installed the icon packages and set up your CSS loader correctly. These are the most common sources of errors.
The request url is outside of Vite serving allow list.
This happened to me after the first time trying to add mdi icons to my vuetify app.
After a rebuild everything worked fine since vite then successfully checked the source and added it to the allow list.
Solution: rebuild the project.
Conclusion
With vue 3 and Vuetify 3 there are finally coming two of my favorite parts of the vue2 ecosystem to vue3.
Vuetify 3 already ported most of the components from vuetify2 and its directives and grid systems. The long awaited Data Tables will follow soon with version 3.1.
You should definitely try it out!
If you want to keep up to date with the releases of vue 3 and Vuetify 3, I would suggest following their roadmaps.
If you need a domain for a budget, with my link you can register a .com domain starting at $6.98!
You can find the code for this article on my GitHub.
Happy coding,
Alex