This is a VueJs beginner series based on Vue.js v3.0, codename "One Piece"
Introduction
Vue (pronounced /vjuː/, like view) is a progressive JavaScript framework for building web user interfaces.
It provides tools to help make websites and apps faster and more dynamic.
Built on standard HTML, CSS, and Javascript Vue is lightweight and utilizes the Virtual DOM to modify the HTML markup making it quite fast.
Why is Vue called "the progressive framework"?
Vue is progressive as you can use it anywhere from a simple drop-in feature within an existing web app to add some interactivity to a fully-featured framework for a large-scale app such as social media or a video streaming web app.
Vue is incrementally adaptable with numerous libraries inside its ecosystem beyond the core library and is flexible enough to support external libraries enabling you to create more sophisticated multi-featured apps.
Quick Start
To use Vue you can link its library in a script tag within your existing web app as demonstrated below, or use it with the support of build tools (a topic we will get into in a later post).
<script src="https://unpkg.com/vue@3"></script>
<div id="app"></div>
<script>
let app = Vue.createApp({}).mount("#app");
</script>
You then define a HTML block whose selector preferably an id you pass inside the mount function of the Vue instance.
A simple Vue application
The anatomy of a Vue application consists of two parts, a template which is in HTML and a Vue instance.
In our case after having linked our Vue library from unpkg, we should follow suit by placing a HTML block that will serve as the part where the visible part of our app (the template) resides and the Vue instance which is the invisible part of our app where most of the logic is expected to be placed.
Let's break down the two parts.
The Template
The template of a Vue application is a HTML block that has a unique selector attribute that we ought not to use on any other part down the DOM tree lest our Vue app produces unexpected results.
<div id="app"> {{ greetings }} </div>
The double curly braces surrounding the variable greetings is what is known as a "Mustache" syntax. The Mustache is a prominent delimiter in many templating languages used to allow text interpolation into the final markup of the templates.
In simple terms, Vue replaces everything inside the curly braces with the corresponding JavaScript expression applied to the enclosed variable in the final markup, this will be carried out only if the variable has been declared inside the Vue instance, else Vue will throw an error.
The Vue Instance
The second part of our app is the Vue instance. A new Vue instance is initiated with Vue.createApp() then is attached to the template by passing the special selector from our template in the mounted function, rendering everything inside our template part of the Vue app.
<script>
let app = Vue.createApp({
return{
return {
message: "Hello there, my name is Mr. Noob"
}
}
}).mount("#app");
</script>
The data property that returns an Object which contains our greetings variable is one of the properties of the Vue instance that provides reactive data for us to work with inside a Vue app.
More on variables and reactivity in Vue will be covered in future posts.
Below is an example of a simple Vue app that when run will display the message "Hello there, my name is Mr. Noob" on the resulting HTML page.
<script src="https://unpkg.com/vue@3"></script>
<div id="app"> {{ message }} </div>
<script>
let app = Vue.createApp({
data(){
message: "Hello there, my name is Mr. Noob"
}
}).mount("#app");
</script>
Vue supports running multiple instances on the same page, in the example above we can add a new Vue instance as follows.
<script src="https://unpkg.com/vue@3"></script>
<div id="app"> {{ message }} </div>
+ <div id="app-two"> {{ message }} </div>
<script>
let app = Vue.createApp({
data(){
message: "Hello there, my name is Mr. Noob"
}
}).mount("#app");
+ let secondApp = Vue.createApp({
+ data(){
+ message: "Hi, I am Jr, Mr. Noob's son, running from another Vue app instance."
+ }
+ }).mount("#app-two");
</script>
So, you can have multiple Vue apps in a single webpage carrying out different tasks, or adding multiple features.
In a real world scenario one instance could be displaying a slideshow of images while another could be submitting newsletter e-mails to a remote database via HTTP API calls.
Vue Use Cases
Vue has a wide range of use cases that span the whole scale of front-end development.
We can use it to add a bit of dynamism into an existing web app, such as adding a simple carousel or content that changes on user interaction e.g mouse movements or text input to creating complex web apps such as e-commerce stores with multiple categories and product pages supporting routing, browser-based data storage via Vue's own libraries such as the vue-router and vuex with features such as a cart, external API call requests and so forth.
Vue enables developers to start small on using it and supports incremental addition of its features without the need for total demolition of existing apps just to accommodate it.
Whether one chooses to use "vanilla" Vue to create apps or use one of the many battle-tested Vue frameworks is down to use cases and preferences.
The following is a list of some popular Vue frameworks.
Top comments (10)
Some of the "popular frameworks" are dead tho, some of your links are even 404.
The only popular (and still alive) ones are Nuxt, Vue/vitepress, Quasar.
I updated the list, and would add Gridsome to yours.
Thanks for the feedback.
Looking at the activity on Github, I would say that Gridsome is really slow paced. Not sure if it even works with Vue3.
Yes, it is slow paced. Seems like Vue 3 is still on the works, has been for quite a while - It's just that the move looks almost stuck.
Personally, this old syntax would be what I would want to learn when getting introduced to Vue, especially coming from the HTML,JavaScript, CSS background and not knowing how build tools work.
It makes one easily understand Vue from a "home ground" perspective so to speak, given this is the same way one would likely have used JavaScript libraries and plugins (carousels etc) before.
Afterwards, it gets easier to delve into components and understand the SFC syntax.
I do agree with you though and love SFCs to bits. I use them in all my Vue projects because they help implement the modular programming approach and all the benefits associated with that. I was also encouraged to use them since I started using build tools, first with the Vue CLI and now with vite.
But I do still use this syntax on projects where there's a need to add a bit of dynamism into (when too lazy to use vanilla JavaScript 😅) and where using build tools would seem like an overkill.
Just to point out, I will get to components and SFCs on this Vue series.
Great effort 👌 I believe that VueJS is the perfect tool for frontend developers. It makes everything so much easier and simpler.
It sure is. Easy to learn even for absolute beginners.
Helpful! thankyou for sharing
Glad it was helpful.
If you'd to choose between VueJs and React than which one you choose and why ? spells to keep people away