Setup Vue 3

Posted on  by admin

Vue 3 is officially here! In this announcement by Evan You, he announces the biggest changes in the new framework and talks about the amazing work the whole Vue team has done.

Developers have long been awaiting the really cool features announced for Vue 3 like Typescript support, better organization for large projects, and rendering optimizations that make for better Vue apps.

  • In this Vue 3 tutorial, we’ll be building a search system that uses a text input to filter articles from an array.

And there you have it!

By the end of this tutorial, you’ll have created a Vue 3 project, built two components with the Composition API. Here’s what we’re going to be making.

  • Alright, I’m sure you’re just as excited as I am, so let’s start coding.

There are a few different options for adding Vue 3 to your existing projects or creating your very own Vue 3 project.

In this tutorial, we’ll be covering my two personal favorite options:.

Migrate a component

If you’ve done Vue development in the past, you’ve likely used the Vue CLI to set up your project. Vue CLI is a command line interface for Vue development that serves as the baseline of the Vue ecosystem.

For our case, it allows us to create a Vue app. First, we have to make sure that we have the most up-to-date version of the Vue CLI and we can do that by running npm update -g @vue/cli our terminal.

Next, to create our project, we want to run vue create .

If we successfully updated our CLI, we should have an option to choose Vue 3. Once we choose the Vue 3 option, our app should build.

When it’s done, we just have to go inside our project and then run our Vue app! The commands for that are:. Now, if we navigate to our http://localhost:8080/ in our browser, we should see our app!

Alright – let’s take a look at another option to create our Vue 3 project.

Step 5: Configure Webpack

Vite (pronounced like “veet”) is a new Vue 3 build tool that serves code using ES Module imports during development instead of bundling using a tool like Webpack.

Built by the creators of Vue, it greatly speeds up the development overhead allowing for faster hot reloads and more efficient cold server startup.

Vite eliminates the bundling process only compiles code on-demand – meaning that only code currently impacting the current screen is compiled.

Reactive Data in the Composition API

This means you don’t have to wait for your entire project to be bundled to start developing. Since bundling large projects could take a long time, Vite has high potential to speed up the development process.

Now you may be asking yourself, “So how exactly is Vite different than the existing vue-cli?”.

  1. Since @vue-cli/service is built on top of webpack, it is a module bundler that will bundle your entire Vue project on startup, hot reloads, and compilation.

Instead of this, Vue Vite will take the ES Import syntax in your code and let the browser parse the import and make a HTTP request for each import.

Hypothetically, handling imports via HTTP requests could create a network waterfall and be slower. But since this method is only for local development, those differences should be negligible.

Also, as we’ll discuss later, it’s super simple to bundle your Vite project for production and avoid this problem entirely.

To get started in Vite, all we have to do is run. Then, we just have to go into our project folder, install our dependencies, and then run our app with the following commands.

Now, if we navigate to http://localhost:3000 – we should see this following app.

1 – Bundling your project for production. A goal for Vite was to make Vue development and production as easily as possible. And although there is no bundling during dev, it is super easy to bundle your project for production.

All you have to do is run npm run build. If we look at package.json, we see that this is calling vite build – which like other build processes, will bundle your Vue project and prepare your dist folder to be served.

2 – Managing asset URLS. Like other Vue project setups, Vite offers two ways to reference your assets.

Closed by default and defineExpose

Absolutely – using the public folder. These assets are referenced with /file.extension andwill be copied to the root of your dist folder when your project is built.

Relatively – for example, files in the src/assets folder are relatively accessed based on the file structure of the folder.

This entire folder is placed as _assets in the dist folder when your project is built.

  1. 3 – Built-in Typescript support.

One of the biggest changes in Vue 3 was the rewriting of the core library using Typescript – allowing for type checking and better error messages depending on your IDE.

Once again, Vue Vite integrates smoothly with Vue 3 by offering built-in Typescript support for both .ts files and for