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. Whereas 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 can check this by running npm -v:

1	npm -v
2	8.19.1

If you do not have Node.js, you can install it by going to the Node.js download page. After you've done 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 project. 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 let's 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, let's dig into the code.

Exploring the Code

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

File or Folder	Description
.vscode	A folder for configuring VS Code to work best with this app. You can safely ignore it.
node_modules	Contains all of your dependencies. You generally avoid touching this folder, as npm manages it automatically.
src	Where all of your source code will live. Most of the time, you will be working in this folder.
.eslintrc.cjs	Configures ESLint—a tool that helps catch bugs at compile-time.
.gitignore	Tells Git what files to ignore (for example node_modules).
.prettierrc.json	Configures Prettier—a formatting tool.
index.html	This is the skeleton HTML file for your app. It is populated using the Vue components and scripts in src. You might need to do something to it at some point, but right now, just leave it as is.
package-lock.json and package.json	The package.json contains a lot of the npm configuration, so you will likely have to configure it. On the other hand, package-lock.json just caches package version information, so you do not need to do anything with it.
README.md	Describes your project to other developers in GitHub.
vite.config.js	The main configuration file for Vite.

Next, let's take a look at the src folder:

File or Folder	Description
assets	A folder to store CSS, images, and other static assets.
components	This folder is for (you guessed it!) Vue components.
router	Includes all of the code for Vue Router, which is what allows your app to function as a single-page application.
views	Contains the actual "pages" of the app.
App.vue and main.js	The base page shell and rendering script respectively.

Now that we have looked at the files, let's 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:

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

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

1	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 a file and replace calls to the variable with its value during the build process. For example, let's 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:

1	VITE_DB_URL=https://url

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

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

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

1	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!