Create Modern Vue Apps Using Create-Vue and Vite

create-vue is a scaffolding tool for Vue apps. It replaces Vue CLI as the recommended way to create Vue SPAs (Single Page Apps). Today we will check out create-vue, see how it works, and build an app using it.

create-vue automates the creation of a new Vue 2 or Vue 3 app using Vite. Vite is an extremely fast build tool created by the Vue team. Where Vue CLI  has its own Webpack-powered build pipeline, create-vue just scaffolds an app. This approach offers more flexibility, as you can use any plugins and configurations that work with Vite, but it is still very simple to use. Additionally, create-vue is a lot faster than Vue CLI due to Vite’s optimization. Without further ado, let’s get started.

Creating An App With Create-Vue

First, make sure you have Node.js and npm installed. You check do this by running npm -v:

npm -v
8.19.1

If you do not have Node.js, you can install it by going to the Node.js download page. After you do that, open a terminal in the folder you want the project to be in. Then, run npm init vue@3. It will ask you to install create-vue. Then you will have to configure a few things, which I will guide you through.

First, you need to decide on a name for your projects. I set the name to create-vue-example, but you can set it to whatever you want.

Next, create-vue will ask you whether you want to use TypeScript. This is just a basic example, so lets set that to no.

Next it will ask you whether you want to add JSX. Once again, because this is a basic example, let’s just say no.

For the rest, select yes for Vue Router, ESLint, and Prettier, and select no for the rest. At the end, your terminal should look something like this:

Now, as the instructions say, cd into the directory of the project, install its dependencies with npm install and run npm run dev. It should give you a link to a local server. Click on the link and you should see something like this:

Congratulations! You just created your first Vue app with create-vue! If you want to build it for deployment, you can run npm run build Now, lets dig into the code.

Exploring the Code

After you finish setting everything up, the file structure should look something like this:

Next, lets take a look at the src folder:

Now that we have looked at the files, lets try customizing the build pipeline with plugins.

Customizing the Build Pipeline With Plugins

Plugins can be very helpful for developing more efficiently. For example, let’s say you wanted to implement a custom font from Google Fonts. You could just use the link Google Fonts gives you on your website to automatically download the font. However, Google Fonts can be quite slow. Luckily, there are solutions. You could self host the font using something like Google Webfonts Helper, but that can be a lot of effort. Luckily, plugins come to the rescue here. Using vite-plugin-webfont-dl, you can link to fonts on Google Fonts as you would normally do and the plugin handles all of the transformation.

How to Add a Plugin

Adding a plugin is very simple. First, we need to install it by running npm install --save-dev plugin-name or in this case, npm install --save-dev vite-plugin-web-dl. Next, we need to add it to the Vite config. First, go to vite.config.js and import the plugin like this:

import webfontDownload from 'vite-plugin-webfont-dl';

Next, you will need to put the plugin in the plugins array of your configuration.

plugins: [vue(), webfontDownload()],

Now, your vite.config.js should look something like this:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import webfontDownload from 'vite-plugin-webfont-dl';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), webfontDownload()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Now you can load fonts by simply pasting in the HTML given to you by Google Fonts, and they will automatically be optimized!

Using Environment Variables

If you want to easily access configuration from your code during the build process, you might want to use environment variables. Vite allows you to load variables from file and replace calls to the variable with its value during the build process. For example, lets say you wanted to easily configure the database URL that your code used. You would first create a .env file in your project directory. In that file, put something like this:

VITE_DB_URL=https://url

The variable name does not matter, as long as it starts with VITE_. Now, in order to access it your code, you need to refer to it like this:

console.log(import.meta.env.VITE_DB_URL)

Then, when Vite compiles your project, that code will be transformed into something like this:

console.log("https://url")

Vite also includes some built in environment variables, like import.meta.env.PROD.

if (import.meta.env.PROD) {
    // App is being compiled for deployment
} else {
    // App is in development mode
}

Conclusion

Now you know your way around create-vue and Vite! These tools allow us to easily set up a Vue app with fast development and powerful configuration. If you would like to learn more, check out the Vite Documentation, and if you would like to look at some other options, check out Vitepress and Nuxt. Thanks for reading!