Vue3 Setup This

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.

Computed Properties

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. 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.

How to migrate from Vue 2 to Vue 3

In this tutorial, we’ll be covering my two personal favorite options:. 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.

Passing Props

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

Vite

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!

Methods in the Composition API

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

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvue-componentvuejs3vue-composition-api or ask your own question.

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.

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?”. 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.

Reactive Data in the Composition API

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.

Understanding the Vue 3 Component

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.

Lifecycle Hooks in Your Vue 3 Project

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.

  • 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.

Creating your first Vite project

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

defineEmits

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

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