Saturday, October 15, 2022

Create Modern Vue Apps Using Create-Vue and Vite

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:

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.

create-vue name promptcreate-vue name promptcreate-vue name prompt

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

create-vue TypeScript promptcreate-vue TypeScript promptcreate-vue TypeScript prompt

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

create-vue JSX promptcreate-vue JSX promptcreate-vue JSX prompt

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:

vue-create end promptvue-create end promptvue-create end prompt

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:

create-vue template starter pagecreate-vue template starter pagecreate-vue template starter page

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:

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 Pretier—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, lets 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, 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:

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

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

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:

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:

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

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

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!


No comments:

Post a Comment