What, Why and How to use Vue.JS?

Vue.JS the next gen JavaScript library

What is Vue.JS

1. Vue.JS is a popular JavaScript framework for building user interfaces.
2. The Vue.JS library will mainly focus on building the user interface.
3. Vue.JS does not worry about other features or other places of development like routing, HTTP Requests, but it has a good eco-system where other libraries can be integrated and used inside the Vue.JS easily (State management — Vuex, Routing — Vue router e.c.t)
4. Vue.JS follows MVC architecture.
5. It has its own extension files i.e… Dot Vue (.Vue)
6. Current version of Vue.JS is 3.x
7. Vue.JS is capable of providing single page application

Why to use Vue.JS

1. We can find any simple and complex solutions easily.
2. Working with Vue.JS does not need many languages. If the person who knows HTML, CSS and JavaScript can easily start working on Vue.JS
3. We can Start Vue.JS easily with simple CDN link or npm installation or Vue CLI or Vite.
4. Vue.JS components can be easily integrated in other frameworks like angular and react.
5. Vue.JS follows component based architecture.
6. The Vue.JS is a developer friendly and can be used and managed easily.
7. The Vue.JS can be used in new projects, or can be used as a page or can also be used in a partial portion of a page.
8. The Vue.JS uses virtual DOM and hence more performant.
9. Already many developers and companies have started using Vue.JS for their projects.
10. Vue.JS would be a good learning for the front end developers.
11. Vue.JS will help you in solving many problems which are facing the existing frameworks.

Software Required for Vue.JS

1. Node JS
2. VS Code

Note: Use Vectur plugin in VS Code for better appearance and intel-licence for .vue files

How to Use Vue.JS

There are 4 ways to use Vue.JS project

1. CDN : By adding CDN to your root file of application. This approach is Mostly used to embed in the existing framework applications.

<script src="https://unpkg.com/vue@next"></script>

By placing the above script in our application index file we can use Vue.JS

2. NPM: By using the following command we can use Vue.JS.

npm install vue@next

By installing the above command in our application we can use Vue.JS

3. Vue Cli: This is the recommended approach which I prefer. This provides linting, production ready builds, hot module reload.

1. npm install -g @vue/cli
2. vue --version 
3. vue create app-name
4. cd app-name
5. npm run serve

From above

Step 1 we can install the Vue CLI globally in our system, and we are now ready to use “vue” in the command line interface.

Step 2 : we can check the “vue” version using (vue — version) command.

Step 3: Once Vue is installed successfully you can create a project using (vue create app-name), this command creates a new project with the given <app-name>.

Step 4: we can move our command line interface path inside the project folder (cd app-name)

Step 5: we can run the application by using (npm run serve) this will run our application in localhost: 8080 by default.

Step 6: Go to your browser and hit localhost:8080 to see the default output of the created project.

4. Vite: Instead of using 2 steps above we can do same thing in single step using Vite

npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev

The above 4 steps creates and runs our application. Still Vite is not having a stable release, it may be the preferred approach in future once it is stable.

Stay tuned for more updates on Vue.js