Getting Started with Vue3

Vue.js is a popular JavaScript framework for building user interfaces. Vue 3, the latest version of Vue, was released in September 2020 and brings a number of improvements and new features to the framework. In this article, I will cover the basics of getting started with Vue 3 for the first time.

Setting up a Vue 3 project

To start using Vue, you will need to have Node.js and npm (Node Package Manager) installed on your computer. If you don’t have them installed, you can download them from the official Node.js website (https://nodejs.org/en/).

Once you have Node.js and npm installed, you can open a terminal and run the following command to install Vue:

> npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.

You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

This command will create a new project in your current directory.

Understanding the Vue 3 basics

Vue.js is a JavaScript framework for building user interfaces. It allows you to create reusable components and manage the state of your application.

In Vue 3, a component is a JavaScript class that defines the behavior and template of a piece of the user interface. You can create a new component by defining a class that extends the Vue object.

Here is an example of a simple Vue 3 component using the options API:

<template>
  <div>
    <h1>Hello {{ name }}!</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Hello',
  props: {
    name: {
      type: String,
      required: true
    }
  }
});
</script>

In this example, we have a template that displays a heading with the value of the name prop. We also have a script that defines a component called Hello, which takes a single prop, name.

To use this component in your application, you need to register it with the Vue instance. You can do this by passing an object with the components property:

import Hello from './Hello.vue'

const app = createApp(App);
app.component('Hello', Hello);
app.mount('#app')

Building a simple application

Now that you understand the basics of Vue 3, let’s build a simple application to see how everything fits together.

Create a new file called App.vue in the src folder of your project. This file will be the root component of your application.

Add the following code to the file:

<template>
<div>
  <Hello name="Vue 3"/>
</div>
</template>
<script>
import Hello from './Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  }
}
</script>

This is the root component of your application, it will be mounted on the #app element of your HTML file and it renders the Hello component that we created earlier.

Next, open the index.html file in the public folder of your project and add an element with the id of “app”:

<div id="app"></div>

Finally, in your main.js file, import the App.vue component and create a new Vue instance, mount it to the “app” element.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.mount('#app')

Now, if you run your application, you should see the message “Hello Vue 3!” displayed on the screen.

Congratulations, you’ve just built your first Vue 3 application! From here, you can continue to explore the framework and build more complex applications.

Additional resources:

Vue 3 official documentation: https://v3.vuejs.org/
Vue 3 migration guide: https://v3.vuejs.org/migration/
Vue 3 Composition API guide: https://v3.vuejs.org/guide/composition-api-introduction.html

This is a basic example of getting started with Vue3, there are many more concepts, features and best practices you can learn and implement to make your application more robust and scalable. I hope this article has provided a good starting point for you to begin your journey with Vue3.

Getting Started with Vue3 - Project Setup

Setting up a Vue 3 project

Understanding the Vue 3 basics

Building a simple application