Vue 3 Tutorial

Posted on  by admin

Want to master The Vue 3? Then here is the list consisting of The Best Vue 3 Tutorial for beginners.

Before we start the collection let’s know why VueJS getting Popular and why you need tutorials. VueJS is lightweight, easy to learn, and pleasant to write in.

Besides, it is one of the powerful and flexible frontend frameworks. It has familiar templating syntax and use of components, integrating or migrating existing projects to Vue is faster and smoother. For this reason, Vue. js is a good option for startups, as well as it is useful in large-scale applications.

Furthermore, It is currently one of the most emerging front-end technologies.

  1. Unlike React.js and Angular, it supports compact file size.
  2. In fact, Vue.js is a combination of Angular and React.js because it uses concepts such as directives and components to control and render user interfaces.
  3. Vue.js also provides the ability to control HTML already rendered by the server, which is not the case with React.js.
  4. Why choose Vue? Constant growth. Friendly learning curve. Ease of integration. Outstanding resources.
  5. Welcoming & helpful community. Enjoyable developer experience. Compared to Angular and React (the two most popular javascript frameworks), Vue is a lot simpler to understand for programmers and non-programmers.
  6. Also, it splits up HTML, CSS, and Javascript so you can focus on constructing each individual component exactly as you’d like.
  7. Vue also offers the best parts of the other front-end frameworks, plus many more features that are unique to Vue.

Following are some of them:. Vue uses component-based architecture for structure and reusability. It also keeps HTML, CSS, and JS separate in their components.

Besides, it also offers a full GUI to serve, build, and create projects. Vue uses hot reloading when it’s run as an app. Hot reloading updates only what has changed on a page without a refresh. Also, VueJS has a great tooling feature that is the new Vue CLI i.e. x to kick start a new Project with things like Routing, Unit Testing, CSS Preprocessors, State Store, Linting, Typescript, PWA, etc. Simple and easy to learn.

Ease in integration. Highly Customizable. Computed Properties. Do use the VueJS static site generator to develop an awesome web app. Well, Angular had a complex structure and it has been hard to learn in the past. Version 2 (Angular) compared to AngularJS was simplified and streamlined a lot. Although, it’s still very formal, rigid, and hard to learn for some developers. On the other hand, one of the best and yet most challenging aspects of React is JSX.

It condenses HTML, CSS, and JS into one language. This makes everything simpler for developers, but harder for designers. Well, Vue solves all of the issues mentioned above. Unlike Angular, it is easy to learn. And unlike JSX, Vue components separate HTML, CSS, and JS.

It’s much easier for designers to work in a Vue component. And keeping everything clean isn’t entirely up to the developer. Vue is subjectively the easiest framework to learn and implement.

And it stays as easy as it is without sacrificing a rich and powerful feature set.

Conditional Rendering

You can start your first project with Materio Free Vuetify VueJS Admin Dashboard Template.

It is the latest most developer-friendly 🤘🏻 & highly customizable✨ Admin Template based on Vuetify.

Besides, it offers ultimate convenience and flexibility. So, you’ll be able to build whatever application you want with very little hassle.

Computed Properties

It is one of the best Vuejs examples of utilizing Vuejs in a project. Furthermore, you can use this one of the best innovative free Vuejs admin templates to create eye-catching, high-quality, and high-performing single-page applications.

Besides, your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices.

  1. Do use the VueJS static site generator to develop an awesome web app.
  2. 1 Simple Dashboard, 1 Chart Library. Single vertical menu.
  3. Simple Light/Dark theme. Basic Cards, pages, and tables. Simple From Elements⚡.
  4. Single vertical menu. Check the Figma Version:. Well, starting with anything requires guidance from an experienced person.
  5. As you are a beginner you can’t do complex things on your own. In the web development world, it is even harder to begin directly as there are lots of complex structures.
  6. Although, when it comes to Vue JS, it is comparatively easy to learn and start with.
  7. Yet, you will need guidance here. So, to help you start with VueJS we have made a list that consists of the best Vue 3 tutorial for beginners.
  8. Advantages of Learning from Tutorials:. You can adapt the concepts easily.
  9. Can learn to develop real-world apps practically.
  10. Guidance is to the point.
  11. Before we start the collection of Vue 3 Tutorial For Beginners you can check some useful collections for beginners such as Vue JS Project Ideas For Beginners, VueJS Admin Templates Free Download, best VueJS Backend frameworks.
  12. You can also check the bestVue editor for faster web development.

Share This Article

Now let’s start the collection. In this Vue 3 tutorial for beginners, you’ll learn Vue.js (using version 3 – the latest major version) from the ground up & use it to make a couple of nice web projects – a reaction timer & the beginning of a small, simple blog.

In this video, you’ll also get a quick intro to Vue & the new features Vue 3 has to offer.

From Hello World to deploying VueJS Applications, this vue 3 tutorial for beginners is a comprehensive tutorial for beginners on Vue JS 3.

Reactive Data in the Composition API

In this Vue 3 tutorial for beginners, you’ll learn the fundamentals of Vue JS (v3) in this project-based crash course. Vue js tutorial full course for beginners to advanced.

Building 10 projects in 10 hours Using Vue 3 composition API – setup, teleport, reactivity, and ref.

Besides this Vue 3 Tutorial for beginners will start from the very basics and teach you how to use TensorFlow and firebase with your vuejs in this full course of 10 hours by building 10 different apps.

A comprehensive Vue 3 Tutorial for beginners. This vue 3 tutorial for beginners deals with composition API in detail. The Composition API is the biggest new feature introduced by Vue.js 3. It’s 100% optional but definitely worth a closer look as it allows you to write leaner, more elegant code – especially in bigger apps and components.

This course is your first step on your path to Vue Mastery.

This Intro to Vue 3 crash course will give you a solid foundation of Vue.js skills.

  • Throughout the tutorial, you’ll build an app to put concepts into practice. Below you will find the starting and ending code for each lesson.
  • In this Vue 3 tutorial for beginners, you’ll learn how to use Vue 3 with typescript.

Starting with Intro & Setup, this tutorial covers types and pros, computed values, Hylia font, and final styles. Vue Components using TypeScript.

Attribute Binding

In this Vue 3 tutorial for beginners, you’ll know what front-end development means and what Vue.js is before jumping into installing the required tools and libraries and setting up our code really easily using the Vue CLI!

From the basic intro to vue 3 to use it in real-life application, this course is the ultimate source for vuejs beginners. Vueschoolis a great source of tutorials, short lessons, and courses to Learn Vue.js and modern, cutting-edge front-end technologies.

It offers both free and premium courses. It is fully dedicated to Vue. The courses start from a very beginner level and bring you all the way to being a notable Vue.js developer. Besides, the new courses are added regularly. On this learning platform, you will learn everything there is to know about Vue while building a production-ready forum application using the Vue-CLI, the managing state with Vuex, single-file components, and Vue router, building Vue plug-ins, adding third-party authentication, and a real-time database usage with Firebase.

Vuemasteryoffers a large number of courses and tutorials.

They also provide useful articles and blogs on VueJS. Besides, it is one of the most preferred Vuejs resources.

Methods

To be the ultimate learning resource for Vue Developers; Vuemastery does this by:.

#4. Data and Methods

Creating weekly tutorials in video and article format. Co-producing the Official Vue.js News.

Producing exclusive content for our subscribers. 25% of your monthly payment goes to the Vue Project. Here you’ll get an amazing collection of articles related to VueJS. Besides, Vuedosecontains very detailed and noteworthy articles and tutorials. You can subscribe to receive all the articles in the mail.

Lifecycle Hooks in Your Vue 3 Project

This vue js tutorial will teach you how to build Vue apps through nine interactive screencasts. Here, you’ll learn basic Vue.js concepts. Besides, this course covers the minimum JavaScript needed to get started with Vue, the basics of Vue, and two more advanced examples that build on the ideas discussed and focus on fixing some aspects of the existing codebase.

Through nine interactive screencasts, this tutorial aims to both help and inspire you. Alligatoris a free blogging platform with an impressive amount of posts on anything front end.

Multi-root templates

Here you’ll get useful tips and comprehensive guides for Vuejs. You will start from a Hello World to more complex concepts like lazy-loading, using third-party tools (Google Analytics, Firebase, Google Maps, Socket.io, etc.), handling online/offline, or using Apollo and GraphQL.

Passing Props

You’ll find many tutorials, videos, and resources that will teach you everything from the basic fundamentals of Vue to advanced Vue techniques.

  • In this Vue 3 tutorial, you’ll learn to build a search system that uses 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.
  • Using what you learn in the Vue 3 Masterclass you’ll be able to develop any sort of Vue application.
  • Your personal website, e-commerce, a SAAS for horse breeders – you name it!
  • The Masterclass is built on practical examples, where you’ll be coming along, building together a complete forum website, and all that this entails.
  • Including user roles and permissions, databases, markdown, and SEO to name a few features.
  • With help of this course, you’ll learn the basics of Vue.

Also, you’ll be able to master this amazing technology from scratch.

#2. Creating a new project using Vue CLI

Besides, you will learn the complete basics in this tutorial, from learning what Vue is to how to set it up and then progress onwards to actually working with its components, understanding the UI development, and even going over the entire syntax.

That is not all, you will also design an entire project using this framework to help you get a hands-on experience with Vue.

You will learn the theory as well as practical applications of this framework and how it can simplify your programming life. In this course, we will teach you the fundamental concepts of Vue.js and create a solid foundation for your Vue journey.

The Vue.js Fundamentals course covers:. Introduction to two-way data binding.

Template syntax and expressions. Vue directives, loops, and conditional rendering. Handling user Inputs. This Vue 3 tutorial for beginners is for developers who want to move fast with Vue 3.

provide / inject

This book covers the traditional way of building Vue apps – the Options API – as well as the new Composition API and even see how you can mix and match them together. There are 8 modules; 4 introduce fundamental skills (Options API; Composition API; Vuex and Vue Router). The remaining four modules are projects, so you can see how to apply the fundamental skills in real apps. After covering Vue; you’ll get to learn Vuex, Vue’s state management solution, and Vue Router, for front-end routing.

The course culminates with a capstone project, using the three core Vue libraries (Vue, Vuex, Vue Router) to build an application. What you’ll learn:. Vue JS 3 from scratch Options and Composition API.

Getting Started

Creating reusable components. Design Patterns. Front-end Routing. This is a project-based course for learning Vue.js. Throughout this vue 3 course, you’ll be able to build some small projects such as Toast notification and Carousel image slider. The main project is building a real-world project called Vue Drive, a Google Drive clone with Vue js 3 composition API.

From basics to building a real-life vue 3 app, this Vue JS 3 course is a must to have for beginners. What you’ll learn:. Build the real-world project with Composition API. Learn how to use Vue js 3 for building web user interfaces. Build web applications with Vue js 3. Dive deeper into Vue js 3. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots.

Besides, you’ll use directives to build functionality with markup and learn to make your own custom directives.

  1. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API. Here You’ll learn:. Understand how to create interesting Vue applications. Use Vuex to manage and update data stored in the application state. Navigate users between pages using Vue Router.
  2. Authenticate users with an advanced OAuth2 flow. Build a beautiful drag and drop image upload. Style content intelligently using CSS Grids. Install Vue 2 through CDN, NPM, and the Vue CLI. Understand how to build a basic Vue 2 App.

List Rendering

Understand core fundamentals at a basic level of Vue 2. This course will provide you Understand the basics of Vue.js and the theory behind using Front-end JavaScript Frameworks. Also, through this course, you will learn the necessary skills to develop intermediate-level Single Page Applications (SPA) by using Vue.js.

Besides, you will start with an introduction to Vue.js, why it is useful, and an explanation of its basic structure.

Dynamic CSS

After that, you will cover some crucial materials around Vue.js like directives, renderers, user input handlers, and Vue components. This ebook helps you get the philosophy of Vue 3 (currently 3.2.20), the new tools (like ES2015, TypeScript, Vue CLI), the essential libraries (vue-router, @vue/test-utils, Axios), and each part of the framework in a pragmatic way.

You will be also able to kickstart your project by the end of the reading and build your amazing apps.

This vue 3 book revolves around best practices, advanced patterns, and techniques for the development of Vue applications.

Besides, it covers both Vue 2 and Vue 3 and is a one-stop resource for many crucial concepts that should help you solve and avoid many pain points when developing Vue applications. In addition, this book covers many advanced topics, such as scalable project architecture, cutting-edge techniques for handling async operations and API states, performance optimization, state management patterns, and more.

Teleporting content

Furthermore, each chapter in the book can be read independently, so you can immediately dive into the topic that interests you the most. The book starts with recipes for implementing Vue.js 3’s new features in your web development projects and migrating your existing Vue.js apps to the latest version.

Conclusion

You will get up and running with TypeScript with Vue.js and find succinct solutions to common challenges and pitfalls faced in implementing components, derivatives, and animation, through building plugins, adding state management, routing, and developing complete single-page applications (SPAs).

As you advance, you’ll discover recipes to help you integrate Vue.js apps with Nuxt.js in order to add server-side rendering capabilities to your SPAs. Besides, you’ll then learn about the Vue.js ecosystem by exploring modern frameworks such as Quasar, Nuxt.js, Vuex, and Vuetify in your web projects.

Finally, the book provides you with solutions for packaging and deploying your Vue.js apps.

This book will help you understand how you can leverage Vue effectively to develop impressive apps quickly using its latest version – Vue 3.0.

  • Besides, the book takes an example-based approach to help you get to grips with the basics of Vue 3 and create a simple application by exploring features such as components and directives.
  • You’ll then enhance your app-building skills by learning how to test the app with Jest and Vue Test Utils.
  • As you advance, you’ll understand how to write non-web apps with Vue 3, create cross-platform desktop apps with the Electron plugin, and build a multi-purpose mobile app with Vue and Ionic.
  • Furthermore, you’ll also be able to develop web apps with Vue 3 that interact well with GraphQL APIs.
  • Finally, you’ll build a chat app that performs real-time communication using Vue 3 and Laravel.

Creating the Application with Vue CLI

Other Useful Books:. So, here was the collection that consists of 10+ Vue 3 TutorialFor Beginners.

Vue 3 installation and setup

Besides, this collection also consists of Vue 3 books, courses, and articles that can be helpful to you while starting with VueJS.

Well, Vuejs is no doubt one of the best progressive JavaScript frameworks.

Companies like Google, Apple, Behance, Trivago, Gitlab, Dribbble, BMW are using VueJS for its simplicity and ability to deliver the best results.

It is indeed the best choice to start with as it has a very supportive community.

Handling User Input

Kick start your journey as a VueJS Web Developer with help of these vue js 3 tutorials. Do share this collection with your colleagues. We hope you find this collection helpful.

In this tutorial you will learn everything you need to know to learn vue.js 3. This tutorial is made as detailed as possible and as simple as possible.

If you are new to vue.js, then you will love this tutorial.

Let's get started. Vue JS is a frontend javascript framework for building websites and user interfaces (UI). Vue runs on the client side and is commonly used to create Single-Page-Application (SPA).

Vue is easy to integrate with existing projects using a CDN. In addition, you can also easily build full-stack applications by creating server-side APIs (Server-Side). # Easily create dynamic application frontends and websites. # Easy to learn.

# Very fast and lightweight.

Adding a Second Component to our Vue 3 Project

# Using the Virtual DOM (Document Object Model). # Easy to integrate with existing projects using CDN. In this tutorial, I will be using the Vue CLI (Command Line Interface).

Of course you can use a CDN, but for large-scale projects it will be easier for you to use the Vue CLI.

To install Vue CLI can be done using NPM (Node Package Manager) or YARN. In this tutorial, I will be using NPM.

To install NPM, you just need to install Node.js. Please download Node.js from the following link and install it on your computer:.

To make sure Node.js is installed on your computer, type the following command in CMD (Command Prompt) or Terminal:.

Then, make sure NPM is also installed properly by typing the following command in CMD (Command Prompt) or Terminal:. Look at the following picture for more details:.

Then install Vue CLI by typing the following command in CMD or Terminal:. The above command will install Vue CLI globally on your computer.

After you have installed Vue CLI, and to make sure Vue CLI is installed properly on your computer, type the following command in CMD or Terminal:.

Like the following picture:. To create a new project with Vue CLI, you can type the following command in CMD or Terminal:.

Like the following picture:. “vue-project” is the name of the project to be created. In the picture above, I created a new project in the directory:.

Preparing the Application

If you created it in a different folder, you can use the CD (Change Directory) command to go to your folder. After running the above command, the following options will appear:.

Select => “Manually select features”. Then, select “Choose Vue version” and “Babel” then Enter. Select Vue version 3.x, then Enter so on.

  • Then Vue CLI will create a new project for you. If the Installation is complete, then type the following command to enter your project:.
  • Then, type the following command to run the project:.
  • Like the following picture:. If it goes well, it will look like the following image:. After that, open your browser then visit the following URL:.

If it goes well, it will appear as follows:.

Open "vue-project" using a code editor, in this tutorial I'm using Visual Studio Code. I also suggest you to use Visual Studio Code. If you look in more detail, then you will get a folder structure like the following:. In the picture above, there are 3 folders, namely: node_modules, public, and src folders.

The node_modules folder contains all the modules needed to build the project. The public folder contains index.html and favicon.ico files, index.html files represent Single Page Application (SPA).

The src folder contains the App.vue, main.js, assets folder, and components folder.

The App.vue file is the root component file of the vue js application, the main.js file is the entry point.

The assets folder is a folder that contains images or other resources needed to build applications. While the components folder is a folder that will contain all the components needed to build the application.

By default, there is one component which is HelloWorld.vue. Please delete the HelloWorld.vue component file, because we don't need it, then change the code in App.vue to be like this:.

Handling User Events

Vue.js makes it easy to display data dynamically.

  • For more details, please type the following code in the "App.vue" file:.
  • Then go to the browser, then you will see results like the following:.

Adding state properties

You can also change the data via method. Change the “App.vue” code to the following for more details:. In the code above there are methods, in which there is one function, namely changeName() which functions to change the value of the data name property to "John Thomas".

Vue 3 Tutorial For Beginners

The changeName function is called when the “Change Name” button is clicked. Return to the browser, then click the "Change Name" button.

If it goes well, then "M Fikri" will change to "Jhon Thomas" as shown below:.

Data binding is an important feature that you must know when building a vue.js application. You can bind attributes, classes and so on. For example, here I want to bind the href attribute to the anchor tag.

Change the code "App.vue" to be like this:.

If you look at the code above, there is an tag with the href attribute taking its value from the "url" data property.

You can NOT make it like this:. That's why you need data binding. By utilizing data binding, you can make attributes or classes dynamic.

Vue provides a two-way data binding feature that functions to retrieve values from form inputs.

Creating a new Vue 3 app

Different from retrieving values from conventional form inputs, two-way data binding applies both ways.

For more details, change the code "App.vue" to be like this:. In the code above there is one input text with two-way data binding attribute, namely: "v-model".

In the data property there is a name with an empty string for the default value. Back to the browser, if it runs well, it will look like the following image:. In the picture above, you can see that every time I type something in the input text, it will automatically be the same as the output.

This not only applies from input text to property data, but also vice versa. If you input the value in the data property name="Jhon", then automatically the input text also contains "John". This two-way data binding is especially useful if you work with forms.

You can use if conditions with the "v-if" directive, and you can also loop using the "v-for" directive in vue.js.

And there you have it!

For more details, change the code "App.vue" to be like this:. In the code above, you can see that we use "v-if" and "v-for" together.

"v-for" functions to loop over the properties of data products, while "v-if" functions to display data if there is data and displays the message "No Data" if there is no data.. In the above case, we only use static data. However, in actual cases the data can come from the backend API.

Emitting an event

Go back to the browser to make sure there are no errors. If it goes well, it will look like the following image:. One of the very important things for you to know in vue.js is lifecycle hooks.

Lifecycle hooks are a window into how the library you are using works behind the scenes. Lifecycle hooks let you know when your component was created, added to the DOM, updated, or destroyed. There are many lifecycle hooks in vue.js such as created, beforeCreate, mounted, beforeMount, updated, beforeUpdate, and others.

Last Touches

In this tutorial, I will only utilize one lifecycle hook which is: created. Lifecycle hooks “created” are lifecycle hooks that are first executed after initializing the component and allow you to access reactive data and events before the template and Virtual DOM are mounted and rendered.

Up Next

It may look confusing, but it's really not. For more details, change the code "App.vue" to be like this:. In the code above, it can be seen that in the data property there are products with an empty array.

Meanwhile the data is moved to the lifecycle hooks created. This works so that the data is loaded before the Virtual DOM is rendered to the DOM.

If you want to run a function that was before the Virtual DOM rendered, then you can put that function into the lifecycle hooks created. If you go to the browser, then everything is still as before.

Computed property is a property that you can use to define data whose value depends on other data. For example, suppose you want to display data based on certain keywords such as search.

Refactoring with Composition API

For more details, change the code "App.vue" to be like this:. In the code above, it can be seen that there is one text input that functions for searching.

Using a root component

Back to the browser, if it runs well, it will look like the following image:. If you want to define data whose value depends on other data, then you can use the computed property.

One of the important concepts you should know in vue.js is components. Vue.js is often used to build Single Page Application (SPA) with multiple components.

What we'll build

For more details, create a component file named “Header.vue” in the “src/components” folder.

Then type the following code:. After that, change the code "App.vue" to be like this:.

In the code above it can be seen that to be able to use the "Header" component, you need to import the component file, then register the component in the Components Property, after that you can output the component to the DOM.

Back to the browser, if it runs well, it will look like the following image:.

Props function to send data or values from Parent Components to child components.

For example, change the code “App.vue” to be like this:. Then change the code "Header.vue" in the "src/components" folder to be as follows:.

In the code above, you can see that there are property props that accept the TextHeader value that comes from the parent component, namely "App.vue".

Understanding the Vue 3 Component

Back to the browser, if it runs well, it will look like the following image:.

Unlike props, custom events function to send data from child components to parent components.. For example, change the code “Header.vue” in the “src/components” folder to be as follows:.

Then, change the code "App.vue" to be like this:. The code above serves to change the header text from "Welcome to M Fikri" to "Welcome To The Jungle".

Styling slot content

Where the text "Welcome To The Jungle" comes from child components.

Back to the browser, then click the "Change Title" button. If it goes well, then the header text will change to "Welcome To The Jungle" as shown below:.

Vue Router serves to render specific components with specific URLs. In contrast to multiple page applications, vue routers do not make requests to the server, but instead render certain components on the client side.

To use Vue Router on vue.js using Vue CLI can be done easily by creating a new project. Therefore, create a new vue.js project with the following command in CMD (Command Prompt) or terminal:.

Like the following picture:. “vue-router-project” is the name of the project to be created.

In the picture above, I created a new project in the directory:. If you created it in a different folder, you can use the CD (Change Directory) command to go to your folder.

After running the above command, the following options will appear:.

Select => “Manually select features”. Then, select “Choose Vue version, Babel, and Router” then Enter. Select Vue version 3.x, then Enter so on.

Then Vue CLI will create a new project for you. If the installation is complete, open the "vue-router-project" project using Visual Studio Code, then you will find a folder structure like the following:.

In the picture above, there are additional 2 folders in the "src" folder, namely: "router" and "views". In the "router" folder there is an "index.js" file which functions to control all routes from the project being built.

Some Vue Vite features you should know

While in the "views" folder there are "Home.vue" and "About.vue" files that function for the display or page you want to use on the route.

Other changes

To make sure all projects run well, run the project by typing the following command in the terminal:. Then go back to the browser, and visit the following URL:.

If it goes well, it will look like the following image:. In the picture above there is a menu "Home" and "About".

You can go to the about page by clicking the “About” menu or visiting the following URL:.

Like the following picture:. Apart from that, you can also add other pages. For example, create a “Contact.vue” file in the “src/views” folder, then type the following code:.

Books:

Then change the code in the “index.js” file in the “src/router” folder to be as follows:.

After that, change the code in the "App.vue" file to be like this:.

Return to the browser, then click the “Contact” menu or visit the following URL:.

Like the following picture:. The discussion this time is about the Vue.js 3 tutorial for beginners.

In this tutorial, you have learned about what vue.js is, why to use vue.js, Vue CLI, to Vue Router.

#7. Conditionals and Loops

So what are you waiting for, let's coding! In this article, you’ll learn the fundamentals of Vue.js.

Even though the article uses Vue 3, the fundamentals apply to older Vue versions too. We’ll cover how to:. create a Vue application with Vue CLI. use conditional rendering. make use of dynamic CSS.

handle user inputs and events. use methods and computed properties. use HTML attribute binding. We’ll start by creating a skeleton application with the CLI. The Vue command-line interface allows us to create and configure new Vue projects from scratch.

That is, instead of adding packages and configurations ourselves, the CLI does that for us.

Let’s install the Vue command-line interface.

Once the installation finishes, you can create projects with the following command:. Once we’ve run the vue create command, we’ll be prompted with a handful of questions. The purpose of these questions is to configure the project to suit our needs.

Methods in the Composition API

Figure 1: The Vue CLI welcome screen. Figure 1 above shows the welcome screen we get when we run vue create your-project-name.

We then have to choose between three different options:. create a default Vue 2 project.

create a default Vue 3 project. manually select features. The first two options will install a default Vue project for us.

Creating your first Vite project

However, we don’t want a default project. For this tutorial, we’ll manually select the features for our project.

adding options such as Vuex, TypeScript, Router and so on . After that, we’re prompted to choose a Vue version for our project.

Creating Reactive Data with ref

For this tutorial, I recommend choosing Vue 3, as pictured below. Figure 3: Choosing a Vue version in Vue CLI. Lastly, we’ll need to answer more questions based on the features we select in the first step, as shown earlier in Figure 2.

Before going further, I want to make sure we’re on the same page:. Run vue create vue3-fundamentals in your terminal. Choose “manually select features”. Untick all features except Babel. For this tutorial, we don’t need any extra features. Choose Vue version 3. Choose “In dedicated config files” when it asks you where to place the config for Babel, and so on.

Why VueJS Is Good For Beginners To Start With?