How To Learn Vue Js For Beginners? 2023 (2023)

You might be an aspiring front-end developer or might already work as one but are new to Vue.js.

One question that usually is asked at the beginning of learning Vue.js is how to learn Vue js for beginners?

It can be a jungle with all the information out there on the best way to learn Vue js for beginners.

If you want to learn more you can read my longer article aboutBest Way To Learn Vue JS.

How To Learn Vue js For Beginners?

There are three different ways to learn Vue js for beginners: books/websites, videos, and podcasts. As a general of rule, it’s recommended to know Javascript, HTML, and CSS before you learn Vue js for beginners.

When you start out learning Vue js as a beginner a great place to start is visiting the Vue js official website.

They have great resources for learning Vue js, especially if you’re a beginner or at the beginning of your learning. Click here to visit the Vue js official website

When you have visited the Vue js official website another great place to learn Vue js for beginners is watching video tutorials with a focus on beginners.

I notice I learn best by first reading about a topic and after watching videos to better understand the concept.

Keep in mind everyone learns differently and it’s important to know how you learn the best way.

Check out my article on how long does it take to learn Vue js?

Keep on reading to know where you can learn Vue js and where the best way is to learn Vue js.

Best Way To Learn Vue js?

There is much information shared on the internet where you can learn Vue js from. I will share my take on where the best way to learn Vue js is especially if you are a beginner.

First and foremost you need to know how you learn the best way is it through watching videos, reading blog posts, or listening to podcasts perhaps?

If we take me as an example I prefer to first read about a topic and after that, if I notice I haven´t fully grasped the concept or want a broader understanding I tend to watch videos on youtube. So if I would be a beginner the best way to learn Vue js for me would be:

1. Start with visiting the Vue js official website Click here to visit the Vue js official website.
2. Google for a Vue js beginner tutorial. I found a great Vue js beginner tutorial from sharkcoder. Click here to visit the Vue js beginner tutorial.
3. Watch a youtube video for Vue js beginner tutorial or from udemy. Traversy media have a great Vue js beginner tutorial on youtube.

Where To Learn Vue js?

There are a lot of great Vue js resource tutorials out there both free and paid where to learn Vue js. I will list a couple of them where you can start your journey for learning Vue js:

As you can see there are several different ways where to learn Vue js.

I hope you find some of the resources listed above useful when learning Vue js I have had great use of them and hope you will find them as well.

Keep in mind it’s not that important where you start to learn, it’s most important to just start.

Don´t forget to check out myarticle about what should you know as a Vue js developer.

How To Vue js Install?

How To Vue js Install? There are several different methods that you can use to install Vue js. For example, you can use these:

• Directly using the <script> tag in HTML.
• Using the CDN.
• Using NPM install Vue.
• Use the Vue CLI (Command Line Interface).

In my sample project, I have decided to use NPM installation for using it to install Vue windows computer. But I will first explain the HTML method.

Use of <script> Tag in HTML

The <script> tag code of the Vue.js is available on the official website. It is easier to download and use directly in your HTML file. The code is as below:

Now you have to move to the official Vue.js website and here you will find the Vue.js to download according to your requirement.

Two versions i.e. development version and the production version are available on the website.

The following figure shows the two versions of Vue.js that you will see on the website:

As per my suggestion, you must go with the development version because it assists you in the warnings and debugs during the development of the project.

The development mode is also not minimized whereas the production version is minimized.

According to the recommendation of Vue.js, you must not use the production version during the development phase because it will not show you warnings for common mistakes during project development.

Vue js CDN

Vue js CDN: By using the latest version with the following, I recommend you to go for it if your purpose is prototyping and learning.

For production purposes, I would recommend you link with the specific version. In this way, you will be able to avoid unexpected breakage from new versions.

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.11″></script>

There is also a native ES module with compatibility to build if you are utilizing a native ES module.

The script of CDN behaves the same as a local script that is imported.

There is a best practice that exists to put the CDN in the head tag and declare the Vue object below the body tag with the tag of <script><script/>

Now let´s check next on how to easily install Vue using the NPM method.

NPM (Node Package Manager) Install Vue

For installing Vue.js application development, you can use NPM. First, you need to install Node.js and NPM.

If you want to check if Node.js already is present in your system then you can run the following command “node-v” in your system’s command prompt to check for the Node.js version.

Note: If it is present then ensure the version must be 10 or above.

Also, check if NPM is installed in your system by the following command “npm -v” to check for the npm version.

You will get the message “command not found” if anyone (Node.js or NPM) is not installed in your system.

You then need to first install them from the Node.js official site. I recommend you choose the LTS version as this is the stable one for most users.

Choose the LTS button on the screen layout to start downloading the Node.js package.

If you are installing from MacBook it will show you macOS or if you are installing from Windows then it will show you the windows version.

Now double-click the left-side file and the installer will appear. You can start downloading the same as you used to download other applications on your computer.

Here in the following image, you can see in the tab that the NPM will also install beside Node.js. There is no need to install them through separate processes.

Press the continue button and proceed till the installation option comes in front of you. Press the install button and it will ask admin password.

Enter the admin password and the process of installation will be completed in a few seconds.

What is Vue CLI?

What is Vue CLI 3? It is to be able to quickly and easily create your Vue project in NPM, Vue CLI is used which is an official package of Vue NPM.

My recommendation is to install this on your computer so you can easily develop Vue projects on your computer regardless of specific folder issues.

Next, I will explain how to do the next step i.e., How To Install Vue CLI.

How To Install Vue CLI?

How to install Vue CLI is done by installing the Vue CLI package via the syntax “npm install -g @vue/cli” in your terminal.

Let´s check next on an example of how to install Vue CLI with the vue-cli-service:

Start by first opening the terminal window and running the following command “npm install -g @vue/cli”.

After a few seconds, the installation process will be accomplished. If you want to create a Vue 3 project, then you will need a 4.5 or above version of Vue CLI.

If you wonder how you check if vue CLI is installed or not you can do this by checking the vue version with the npm vue –version or npm vue -v.

If you want to upgrade the version of Vue CLI in case the version is below 4.5 then use the following command npm upgrade –next.

Next, we will go through how you can create a project in Vue.

How Do I Create A Project In Vue?

How Do I create a project in Vue can be done by installing the Vue CLI package in your terminal with the syntax “vue create myProjectName”.

Let´s next check on how I get started with Vue 3 by installing it:

Let´s start with opening the terminal and going to the desktop by using the command cd /Desktop or a folder of your choice.

Next, we install Vue 3 by using the command “vue create my-project-name”.

This step will show you which version of Vue you want to utilize and you can choose to install Vue 3 with the help of moving the arrow key up and down. Enter after making a selection.

After pressing enter, the creation of the Vue 3 project will be started with the title of the file or folder.

After a few seconds of the Vue 3 default parameters installation, it will be shown on your desktop with the name of the file.

Vue js Examples For Beginners

If you want to know which parts are in Vue js examples for beginners then there are some important files that you need in Vue and that render onto the page.

Those areindex.html, main.js, andApp.vue.

Index.htmlI want to explain index.html a bit. This is the file that you need not only for just Vue projects but also for the development of most web pages.

The basic skeleton we see on the main page is because of the index.html as it performs the duty of displaying the default start webpage.

Following is the file that is developed with the Vue 2 project and is the same for Vue 3 project.

For development purposes, this file has great importance that’s why I checked this at first to take notice if there is any change between Vue 2 and Vue 3.

There is adivelement withid=”app”present in the Vue file. As a result, Vue knows where to look to mount the application to DOM.

Thisdivwill act as an entry point in Vue as Vue utilizes this to insert all the Vue files.

Vue magical effects happen within those inserted Vue files but the code of Vue is delivered to the main HTML page through the first entry point of div.

This file gives clarity that both Vue 2 and Vue 3 have the same ways of putting files in the DOM from this aspect as both use the same approach.

Vue 2 or Vue 3 both search for div in the index.html file and when they successfully find the Vue then the Vue app gets linked to the specific element.

main.js

You can find the main.js file in the Vue project at the point where the Vue instance initializes itself. The app initialization is as follows in Vue 2:

But there is a difference in the Vue 3 as following:

You can understand the difference as per the change and I will explain this difference.

Vue 2

In Vue 2, when I noticed what is the actual difference then the following 2 statements are noteworthy.

There is a need to import the Vue constructor function from Vue for the creation of a new instance of Vue.

The appis also imported as you can see in theApp.vuefile in the folder. The reason is you will need the root Vue component where all the Vue code will live.

The future children components you will develop later will come into the project afterward via the App file.

Further, here is the other thing I found in the Vue 2 main.js file as following:

You can see here the use of the Vue constructor function. new Vue() helps in the creation of a new Vue instance of the Vue object.

There is anoptionsobject that exists in which the object passed into the constructor function Vue{(..)}.

Vue 2 is sometimes calledOptions APIdue to this reason (although the options API is just a section of Vue2). Options include certain properties i.e. data, computed, methods, etc.

Now come to the second line, here you cansee render: (h) => h(App), this renders property allows Vue to render the component as HTML.

This render function builts out the HTML from the App.vue component file.

Also, Vue is aided by other things magically as well. Here I want to add that there is a built-in Vue method as the $mount method that facilitates in the manual mounting of the Vue instance.

Vue 3

Here comes Vue 3 main.js file that has a different look:

You can see a huge difference in this code as there is a createApp function exist that is being imported rather than the import of Vue function to create a Vue instance.

The code is initiated with the one line that is at the end of the above code.

Inside the function, the new Vue() constructor is being used by the createApp function still however it’s not visible apparently.

The only difference is it’s making a copy of the Vue instance. The separate configuration is possible with the help ofcreateAppcopy instead of the direct use of thenew Vue().

The direct addition of configuration options can affect all the utilization options of the Vue instance and ultimately can lead to mutations of the global state.

By encapsulation this within the function, you will be able to make separate Vue instances.

Each instance can be separately configured without affecting the others.

This is the upgraded version itself because the configuration is easier for two Vue objects while their creation is required. In the below example, you can see the example:

Now you are thinking why this can help you? You can imagine possible situations.

If there are different teams using Vue but they want to make the same App page/file with their own chosen plugin features etc or maybe if you are working on the base of something but eventually you want to part the work into sections just to see how configuration works differently.

No matter what the reason is, you can make the use of Vue better in this way.

App.vue

Here is the last fileApp.vueyou can see if there are any differences.

When the application gets mounted to the element of DOM in theindex.htmlfile, the root component is theApp.vuefile, the one initiation point for rendering the Vue code.

Here is the difference that I observed in App.vue between Vue 2 and Vue 3:

And App.vue 3:

You will be wondering the same as me because there is no requirement for the surrounding root div in the template. It is no longer a requirement to have a single root element so:

In Vue 2, the providence of a single root element as the direct child of the template is necessity.

Vue 3 facilitates this matter and there can be multiple direct child elements i.e., multiple root elements.

This will help in the subtraction of all the extra divs that are present around the HTML code for every component.

Anyhow, if you use a multi-root element instead of a single root and you put the non-prop attribute on the component, that attribute will not display in your component unless you explicitly assign those attributes to an element.

This is something that you need to be aware of.

Is Vuejs Worth Learning?

Is Vuejs worth learning?

Vue js is worth learning its a great Javascript framework to work with and is considered easier and faster too learn than the other two big Javascript frameworks/libraries React / Angular.

Vue.js future looks bright and is continue to grow on the market. Even if React / Angular still are the bigger Javascript frameworks/libraries on the market Vue.js is getting used by bigger and more companies.

Vue.js power in the growing market is that it´s really easy and fast to get up and running projects compare to React and Angular.

Vue.js niche is to be used in smaller projects where you want to get up and running the project in a fast manner.

The future of Vue.js is it will keep growing on the market but it’s highly unlikely it will get bigger than React and Angular.

Most because React and Angular are backed by Facebook and google and big companies love to work with those.

Don´t forget to check out myarticle about How To Implement Nuxt Middleware Redirect?

Is Vue Still Relevant 2023?

Before you start learn Vue js you might wonder is Vue still relevant 2023?

Vue.js is growing on the market and the future is looking bright since bigger and more companies are starting to use it.

Vue.js is growing in popularity among developers and companies since it’s relatively easy to learn compared to React and Angular, it’s great for getting a project up and running fast and perfect for small to medium size projects.

Vue.js also has great documentation which speeds up learning faster and it also has a great and large community that supports the Vue.js framework.

Related Articles

• What Is The Best Vue 3 CSS Framework?
• Material UI Vue 3 – Material Design In Vue.js
• What Is Ant Design Vuejs?
• Vue gtag: How To Setup gtag In Vue.js / Nuxt.js
• Use Vue Conditional Class (Vue Conditionally Examples)

Final Thoughts

If you wonder how to learn Vue js for beginners? It can be relatively easy if you start by visiting websites or videos which offer Vue js beginner tutorials.

There is a lot of great information out there to speed up your learning.

It´s important to make sure you notice how you learn the best and learn at your own pace.

If you just rush through a lot of Vue js tutorials without taking the time to absorb the information, you could have problems in the future.