Create Trendy Vue Apps Utilizing Create-Vue and Vite

create-vue is a scaffolding instrument for Vue apps. It replaces Vue CLI because the really helpful option to create Vue SPAs (Single Web page Apps). Immediately we’ll try create-vue, see the way it works, and construct an app utilizing it.

create-vue automates the creation of a brand new Vue 2 or Vue 3 app utilizing Vite. Vite is a particularly quick construct instrument created by the Vue group. The place Vue CLI  has its personal Webpack-powered construct pipeline, create-vue simply scaffolds an app. This strategy gives extra flexibility, as you should use any plugins and configurations that work with Vite, however it’s nonetheless quite simple to make use of. Moreover, create-vue is rather a lot sooner than Vue CLI as a consequence of Vite’s optimization. With out additional ado, let’s get began.

Creating An App With Create-Vue

First, ensure you have Node.js and npm put in. You verify do that by operating npm -v:

npm -v
8.19.1

For those who wouldn’t have Node.js, you may set up it by going to the Node.js obtain web page. After you try this, open a terminal within the folder you need the venture to be in. Then, run npm init vue@3. It would ask you to put in create-vue. Then you’ll have to configure just a few issues, which I’ll information you thru.

First, you should determine on a reputation in your initiatives. I set the identify to create-vue-example, however you may set it to no matter you need.

Subsequent, create-vue will ask you whether or not you need to use TypeScript. That is only a fundamental instance, so lets set that to no.

Subsequent it would ask you whether or not you need to add JSX. As soon as once more, as a result of this can be a fundamental instance, let’s simply say no.

For the remainder, choose sure for Vue Router, ESLint, and Prettier, and choose no for the remainder. On the finish, your terminal ought to look one thing like this:

Now, because the directions say, cd into the listing of the venture, set up its dependencies with npm set up and run npm run dev. It ought to provide you with a hyperlink to a neighborhood server. Click on on the hyperlink and it is best to see one thing like this:

Congratulations! You simply created your first Vue app with create-vue! If you wish to construct it for deployment, you may run npm run construct Now, lets dig into the code.

Exploring the Code

After you end setting every part up, the file construction ought to look one thing like this:

Subsequent, lets check out the src folder:

Now that we’ve seemed on the information, lets strive customizing the construct pipeline with plugins.

Customizing the Construct Pipeline With Plugins

Plugins might be very useful for growing extra effectively. For instance, as an instance you needed to implement a customized font from Google Fonts. You might simply use the hyperlink Google Fonts offers you in your web site to routinely obtain the font. Nevertheless, Google Fonts might be fairly gradual. Fortunately, there are answers. You might self host the font utilizing one thing like Google Webfonts Helper, however that may be a whole lot of effort. Fortunately, plugins come to the rescue right here. Utilizing vite-plugin-webfont-dl, you may hyperlink to fonts on Google Fonts as you’ll usually do and the plugin handles the entire transformation.

How you can Add a Plugin

Including a plugin could be very easy. First, we have to set up it by operating npm set up --save-dev plugin-name or on this case, npm set up --save-dev vite-plugin-web-dl. Subsequent, we have 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';

Subsequent, you will want to place the plugin within the plugins array of your configuration.

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

Now, your vite.config.js ought to look one thing 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 may load fonts by merely pasting within the HTML given to you by Google Fonts, and they’re going to routinely be optimized!

Utilizing Setting Variables

If you wish to simply entry configuration out of your code throughout the construct course of, you would possibly need to use surroundings variables. Vite lets you load variables from file and substitute calls to the variable with its worth throughout the construct course of. For instance, let’s imagine you needed to simply configure the database URL that your code used. You’ll first create a .env file in your venture listing. In that file, put one thing like this:

VITE_DB_URL=https://url

The variable identify doesn’t matter, so long as it begins with VITE_. Now, as a way to entry it your code, you should discuss with it like this:

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

Then, when Vite compiles your venture, that code might be remodeled into one thing like this:

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

Vite additionally contains some inbuilt surroundings variables, like import.meta.env.PROD.

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

Conclusion

Now you realize your manner round create-vue and Vite! These instruments enable us to simply arrange a Vue app with quick improvement and highly effective configuration. If you want to be taught extra, try the Vite Documentation, and if you want to have a look at another choices, try Vitepress and Nuxt. Thanks for studying!