List of 300 VueJS Interview Questions
Click ⭐if you like the project. Pull Request are highly appreciated.
-
Vue.js is an open-source, progressive Javascript framework for building user interfaces that aim to be incrementally adoptable. The core library of VueJS is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
-
Below are the some of major features available with VueJS
- Virtual DOM: It uses virtual DOM similar to other existing frameworks such as ReactJS, Ember etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.
- Components: Used to create reusable custom elements in VueJS applications.
- Templates: VueJS provides HTML based templates that bind the DOM with the Vue instance data
- Routing: Navigation between pages is achieved through vue-router
- Light weight: VueJS is light weight library compared to other frameworks
-
Lifecycle hooks are a window into how the library you’re using works behind-the-scenes. By using these hooks, you will know when your component is created, added to the DOM, updated, or destroyed. Let's look at lifecycle diagram before going to each lifecycle hook in detail,
- Creation(Initialization):
Creation Hooks allow you to perform actions before your component has even been added to the DOM. You need to use these hooks if you need to set things up in your component both during client rendering and server rendering. Unlike other hooks, creation hooks are also run during server-side rendering.
- beforeCreate: This hook runs at the very initialization of your component. hook observes data and initialization events in your component. Here, data is still not reactive and events that occur during the component’s lifecycle have not been set up yet.
new Vue({ data: { count: 10 }, created: function () { console.log('Nothing gets called at this moment') // `this` points to the view model instance console.log('count is ' + this.count); } }) // count is undefined
- created: This hook is invoked when Vue has set up events and data observation. Here, events are active and access to reactive data is enabled though templates have not yet been mounted or rendered.
Note: Remember that, You will not have access to the DOM or the target mounting element (this.$el) inside of creation hooksnew Vue({ data: { count: 10 }, created: function () { // `this` points to the view model instance console.log('count is: ' + this.count) } }) // count is: 10
- Mounting(DOM Insertion):
Mounting hooks are often the most-used hooks and they allow you to access your component immediately before and after the first render.
- beforeMount: They allow you to access your component immediately before and after the first render.
new Vue({ beforeMount: function () { // `this` points to the view model instance console.log(`this.$el is yet to be created`); } })
- mounted: This is a most used hook and you will have full access to the reactive component, templates, and rendered DOM (via. this.$el). The most frequently used patterns are fetching data for your component.
<div id="app"> <p>I'm text inside the component.</p> </div> new Vue({ el: '#app', mounted: function() { console.log(this.$el.textContent); // I'm text inside the component. } })
- Updating (Diff & Re-render):
Updating hooks are called whenever a reactive property used by your component changes, or something else causes it to re-render
- beforeUpdate: The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.
<div id="app"> <p>{{counter}}</p> </div> ...// rest of the code new Vue({ el: '#app', data() { return { counter: 0 } }, created: function() { setInterval(() => { this.counter++ }, 1000) }, beforeUpdate: function() { console.log(this.counter) // Logs the counter value every second, before the DOM updates. } })
- updated: This hook runs after data changes on your component and the DOM re-renders.
<div id="app"> <p ref="dom">{{counter}}</p> </div> ...// new Vue({ el: '#app', data() { return { counter: 0 } }, created: function() { setInterval(() => { this.counter++ }, 1000) }, updated: function() { console.log(+this.$refs['dom'].textContent === this.counter) // Logs true every second } })
- Destruction (Teardown):
Destruction hooks allow you to perform actions when your component is destroyed, such as cleanup or analytics sending.
- beforeDestroy:
beforeDestroyis fired right before teardown. If you need to cleanup events or reactive subscriptions, beforeDestroy would probably be the time to do it. Your component will still be fully present and functional.
new Vue ({ data() { return { message: 'Welcome VueJS developers' } }, beforeDestroy: function() { this.message = null delete this.message } })
- destroyed: This hooks is called after your component has been destroyed, its directives have been unbound and its event listeners have been removed.
new Vue ({ destroyed: function() { console.log(this) // Nothing to show here } })
- beforeDestroy:
- Creation(Initialization):
Creation Hooks allow you to perform actions before your component has even been added to the DOM. You need to use these hooks if you need to set things up in your component both during client rendering and server rendering. Unlike other hooks, creation hooks are also run during server-side rendering.
-
VueJS provides set of directives to show or hide elements based on conditions. The available directives are: ** v-if, v-else, v-else-if and v-show** 1. v-if: The v-if directive adds or removes DOM elements based on the given expression. For example, the below button will not show if isLoggedIn is set to false.
<button v-if="isLoggedIn">Logout</button>
You can also control multiple elements with a single v-if statement by wrapping all the elements in a element with the condition. For example, you can have both label and button together conditionally applied,
<template v-if="isLoggedIn"> <label> Logout </button> <button> Logout </button> </template>
2. v-else: This directive is used to display content only when the expression adjacent v-if resolves to false. This is similar to else block in any programming language to display alternative content and it is preceded by v-if or v-else-if block. You don't need to pass any value to this. For example, v-else is used to display LogIn button if isLoggedIn(not logged in) is set to false.
<button v-if="isLoggedIn"> Logout </button> <button v-else> Log In </button>
3. v-else-f: This directive is used when we need more than two options to be checked. For example, ifLoginDisabled property is disabled then we need to prevent user to login instead just display the label. This can be achieved through v-else statement.
<button v-if="isLoggedIn"> Logout </button> <label v-else-if="isLoginDisabled"> User login disabled </label> <button v-else> Log In </button>
4. v-show: This directive is similar to v-if but it renders all elements to the DOM and then uses the CSS display property to show/hide elements. This directive is recommended if the elements are switched on and off frequently.
<span if-show="user.name">Welcome user,{{user.name}}</span>
-
Below are some of the main differences between between v-show and v-if directives, 1. v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression. 2. v-if supports v-else and v-else-if directives whereas v-show doesn't support else directives. 3. v-if has higher toggle costs while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time. 4. v-if supports tab but v-show doesn't support.
-
The built-in v-for directive allows us to loop through items in an array or object. You can iterate on each element in the array or object.
- Array usage:
<ul id="list"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul> var vm = new Vue({ el: '#list', data: { items: [ { message: 'John' }, { message: 'Locke' } ] } })
You can also use
ofas the delimiter instead ofin, similar to javascript iterators. 2. Object usage:<div id="object" v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> var vm = new Vue({ el: '#object', data: { user: { firstName: 'John', lastName: 'Locke', age: 30 } } })
-
Every Vue application works by creating a new Vue instance with the Vue function. Generally the variable vm (short for ViewModel) is used to refer Vue instance. You can create vue instance as below,
var vm = new Vue({ // options })
As mentioned in the above code snippets, you need to pass options object. You can find the full list of options in the API reference.
-
You can achieve conditional group of elements(toggle multiple elements at a time) by applying v-if directive on
<template>element which works as invisible wrapper(no rendering) for group of elements. For example, you can conditionally group user details based on valid user condition<template v-if="condition"> <h1>Name</h1> <p>Address</p> <p>Contact Details</p> </template>
-
Vue always try to render elements as efficient as possible. So it tries to reuse the elements instead of building them from scratch. But this behavior may cause problems in few scenarios. For example, if you try to render the same input element in both
v-ifandv-elseblocks then it holds the previous value as below,<template v-if="loginType === 'Admin'"> <label>Admin</label> <input placeholder="Enter your ID"> </template> <template v-else> <label>Guest</label> <input placeholder="Enter your name"> </template>
In this case, it shouldn't reuse. We can make both input elements as separate by applying key attribute as below,
<template v-if="loginType === 'Admin'"> <label>Admin</label> <input placeholder="Enter your ID" key="admin-id"> </template> <template v-else> <label>Guest</label> <input placeholder="Enter your name" key="user-name"> </template>
The above code make sure both inputs are independent and doesn't impact each other.
-
It is recommended not to use v-if on the same element as v-for. Because v-for directive has a higher priority than v-if. There are two cases where developers try to use this combination,
- To filter items in a list For example, if you try to filter the list using v-if tag,
<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} <li> </ul>
This can be avoided by preparing the filtered list using computed property on the initial list
computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } ...... // ...... // <ul> <li v-for="user in activeUsers" :key="user.id"> {{ user.name }} <li> </ul>
- To avoid rendering a list if it should be hidden For example, if you try to conditionally check if the user is to show or hide
<ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} <li> </ul>
This can be solved by moving the condition to a parent by avoiding this check for each user
<ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} <li> </ul>
-
In order to track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique
keyattribute for each item with inv-foriteration. An ideal value for key would be the unique id of each item. Let us take an example usage,<div v-for="item in items" :key="item.id"> {{item.name}} </div>
Hence, It is always recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple. Note: You shouldn’t use non-primitive values like objects and arrays as v-for keys. Use string or numeric values instead.
-
As the name suggests, mutation methods modifies the original array. Below are the list of array mutation methods which trigger view updates.
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse() If you perform any of the above mutation method on the list then it triggers view update. For example, push method on array named 'items' trigger a view update,
vm.todos.push({ message: 'Baz' })
-
The methods which do not mutate the original array but always return a new array are called non-mutation methods. Below are the list of non-mutation methods,
- filter()
- concat()
- slice() For example, lets take a todo list where it replaces the old array with new one based on status filter,
vm.todos = vm.todos.filter(function (todo) { return todo.status.match(/Completed/) })
This approach won't re-render the entire list due to VueJS implementation.
-
Vue cannot detect changes for the array in the below two cases,
- When you directly set an item with the index,For example,
vm.tods[indexOfTodo] = newTodo
- When you modify the length of the array, For example,
vm.todos.length = todosLength
You can overcome both the caveats using
setandsplicemethods, Let's see the solutions with an examples, First use case solution// Vue.set Vue.set(vm.todos, indexOfTodo, newTodoValue) (or) // Array.prototype.splice vm.todos.splice(indexOfTodo, 1, newTodoValue)
Second use case solution
vm.todos.splice(todosLength)
- When you directly set an item with the index,For example,
-
Vue cannot detect changes for the object in property addition or deletion., Lets take an example of user data changes,
var vm = new Vue({ data: { user: { name: 'John' } } }) // `vm.name` is now reactive vm.email = john@email.com // `vm.email` is NOT reactive
You can overcome this scenario using the Vue.set(object, key, value) method or Object.assign(),
Vue.set(vm.user, 'email', john@email.com); (or) vm.user = Object.assign({}, vm.user, { email: john@email.com })
-
You can also use integer type(say 'n') for v-for directive which repeat the element many times.
<div> <span v-for="n in 20">{{ n }} </span> </div>
It displays the number 1 to 20.
-
Just similar to v-if directive on template, you can also use a tag with v-for directive to render a block of multiple elements. Let's take a todo example,
<ul> <template v-for="todo in todos"> <li>{{ todo.title }}</li> <li class="divider"></li> </template> </ul>
-
You can use event handlers in vue similar to plain javascript. The method calls also support the special $event variable.
<button v-on:click="show('Welcome to VueJS world', $event)"> Submit </button> \\\\ methods: { show: function (message, event) { // now we have access to the native event if (event) event.preventDefault() console.log(message); } }
-
Normally, javascript provides event.preventDefault() or event.stopPropagation() inside event handlers. You can use methods provided by vue, but these methods are meant for data logic instead of dealing with DOM events. Vue provides below event modifiers for v-on and these modifiers are directive postfixes denoted by a dot.
- .stop
- .prevent
- .capture
- .self
- .once
- .passive Let's take an example of stop modifier,
<!-- the click event's propagation will be stopped --> <a v-on:click.stop="methodCall"></a>
You can also chain modifiers as below,
<!-- modifiers can be chained --> <a v-on:click.stop.prevent="doThat"></a>
-
Vue supports key modifiers on
v-onfor handling keyboard events. Let's take an example of keyup event with enter keycode<!-- only call `vm.show()` when the `keyCode` is 13 --> <input v-on:keyup.13="show">
Remembering all the keycodes is really difficult. It supports the full list of keycode aliases
- .enter
- .tab
- .delete (captures both “Delete” and “Backspace” keys)
- .esc
- .space
- .up
- .down
- .left
- .right
Now the above keyup code snippet can be written with aliases as follows,
<input v-on:keyup.enter="submit"> (OR) <!-- with shorthand notation--> <input @keyup.enter="submit">
-
You can define custom key modifier aliases via the global
config.keyCodes. There are few guidelines for the properties- You can't use cameCase, instead you can use kebab-case with double quotation marks
- You can define multiple values in ann array format
Vue.config.keyCodes = { f1: 112, "media-play-pause": 179, down: [40, 87] }
-
Vue supports below modifiers to trigger mouse or keyboard event listeners when the corresponding key is pressed,
- .ctrl
- .alt
- .shift
- .meta Lets take an example of control modifier with click event,
<!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
-
Vue supports below mouse button modifiers
- .left
- .right
- .middle
For example, the usage of
.rightmodifier as below
<button v-if="button === 'right'" v-on:mousedown.right="increment" v-on:mousedown.left="decrement" />
-
You can use the
v-modeldirective to create two-way data bindings on form input, textarea, and select elements. Lets take an example of it using input component,<input v-model="message" placeholder="Enter innput here"> <p>The message is: {{ message }}</p>
Remember, v-model will ignore the initial value, checked or selected attributes found on any form elements. So it always use the Vue instance data as the source of truth.
-
There are three modifiers supported for v-model directive. 1. lazy: By default, v-model syncs the input with the data after each input event. You can add the lazy modifier to instead sync after change events.
<!-- synced after "change" instead of "input" --> <input v-model.lazy="msg" >
2. number: If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model. Even with type="number", the value of HTML input elements always returns a string. So, this typecast modifier is required.
<input v-model.number="age" type="number">
3. trim: If you want whitespace from user input to be trimmed automatically, you can add the trim modifier to your v-model.
<input v-model.trim="msg">
-
Components are reusable Vue instances with a name. They accept the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks(except few root-specific options like el). Lets take an example of counter component,
// Define a new component called button-counter Vue.component('button-counter', { template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' data: function () { return { count: 0 } }, })
Let's use this component inside a root Vue instance created with new Vue
<div id="app"> <button-counter></button-counter> </div> var vm = new Vue({ el: '#app' });
-
Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. You can pass those list of values as props option and use them as similar to data variables in template.
Vue.component('todo-item', { props: ['title'], template: '<h2>{{ title }}</h2>' })
Once the props registered, you can pass them as custom atrtributes,
<todo-item title="Learn Vue conceptsnfirst"></todo-item>
-
Every component must have a single root element when template has more than one element. In this case, you need to wrap a parent element.
<div class="todo-item"> <h2>{{ title }}</h2> <div v-html="content"></div> </div>
Otherwise there will an error throwing, saying that "wrap those elements with a parent element".
-
If you want child wants to communicate back up to the parent, then emit an event from child using
$eventobject to parent,Vue.component('todo-tem', { props: ['todo'], template: ` <div class="todo-item"> <h3>{{ todo.title }}</h3> <button v-on:click="$emit('increment-count', 1)"> Add </button> <div v-html="todo.description"></div> </div> ` })
Now you can use this todo-item in parent component to access the count value.
<ul v-for="todo in todos"> <li> <todo-item v-bind:key="todo.id" v-bind:todo="todo" v-on:increment-count="total += 1"></todo-item> </li> </ul> <span> Total todos count is {{total}}</span>
-
The custom events can also be used to create custom inputs that work with v-model. The inside the component must follow below rules,
- Bind the value attribute to a value prop
- On input, emit its own custom input event with the new value. Lets take a custom-input component as an example,
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })
Now you can use
v-modelwith this component,<custom-input v-model="searchInput"></custom-input>
-
Vue implements a content distribution API using the element to serve as distribution outlets for content created after after the current Web Components spec draft. Let's create ann alert component with slots for content insertion,
Vue.component('alert', { template: ` <div class="alert-box"> <strong>Error!</strong> <slot></slot> </div> ` })
Now you can insert dynamic content as below,
<alert> There is an issue with in application. </alert>
-
The components which are globally registered can be used in the template of any root Vue instance (new Vue) created after registration. In the global registration, the components created using Vue.component as below,
Vue.component('my-component-name', { // ... options ... })
Let's take multiple components which are globally registered in the vue instance,
Vue.component('component-a', { /* ... */ }) Vue.component('component-b', { /* ... */ }) Vue.component('component-c', { /* ... */ }) new Vue({ el: '#app' })
The above components can be used in the vue instance,
<div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c> </div>
Remember that the components can be used in subcomponents as well.
-
Due to global registration, even if you don't use the component it could still be included in your final build. So it will create unnecessary javascript in the application. This can be avoided using local registration with the below steps,
- First you need to define your components as plain JavaScript objects
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ }
Locally registered components will not be available in sub components. In this case, you need to add them in components section
var ComponentA = { /* ... */ } var ComponentB = { components: { 'component-a': ComponentA }, // ... }
- You can use the components in the components section of the vue instance,
new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })
-
In local registration, you need to create each component in components folder(optional but it is recommended) and import them in another component file components section. Let's say you want to register component A and B in component C, the configuration seems as below,
import ComponentA from './ComponentA' import ComponentB from './ComponentC' export default { components: { ComponentA, ComponentB }, // ... }
Now both ComponentA and ComponentB can be used inside ComponentC‘s template.
In global registration, you need to export all common or base components in a separate file. But some of the popular bundlers like
webpackmake this process simpler by usingrequire.contextto globally register base components in the below entry file(one-time).import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' const requireComponent = require.context( // The relative path of the components folder './components', // Whether or not to look in subfolders false, // The regular expression used to match base component filenames /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach(fileName => { // Get component config const componentConfig = requireComponent(fileName) // Get PascalCase name of component const componentName = upperFirst( camelCase( // Strip the leading `./` and extension from the filename fileName.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) // Register component globally Vue.component( componentName, // Look for the component options on `.default`, which will // exist if the component was exported with `export default`, // otherwise fall back to module's root. componentConfig.default || componentConfig ) })
-
You can declare props with type or without type. But it is recommended to have prop types because it provides the documentation for the component and warns the developer for any incorrect data type is assigned.
props: { name: String, age: Number, isAuthenticated: Boolean, phoneNumbers: Array, address: Object }
As mentioned in the above code snippet, you can list props as an object, where the properties’ names and values contain the prop names and types, respectively.
-
All props follows a one-way-down binding between the child property and the parent one. i.e, When the parent property is updated then that latest prop value will be passed down to the child, but not the otherway(child to parent) around. The child component should not mutate the prop otherwise it throws a warning in the console. The possible mutation cases can be solved as below,
- When you try to use parent prop as initial value for child property: In this case you can define a local property in child component and assign parent value as initial value
props: ['defaultUser'], data: function () { return { username: this.defaultUser } }
- When you try to transform the parent prop: You can define a computed property using the prop’s value,
props: ['environment'], computed: { environment: function () { return this.environment.trim().toUpperCase() } }
-
A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined. For example, If you are using a 3rd-party custom-input component that requires a
data-tooltipattribute on the input then you can add this attribute to component instance,<custom-input data-tooltip="Enter your input" />
If you try to pass the props from parent component the child props with the same names will be overridden. But props like
classandstyleare exception to this, these values will be merged in the child component.//Child component <input type="date" class="date-control"> //Parent component <custom-input class="custom-class" />
-
Vue provides validations such as type, required fields, default values along with customized validations. You can provide an object with validation requirements to the value of props as below, Let's take an example of user profile Vue component with possible validations,
Vue.component('user-profile', { props: { // Basic type check (`null` matches any type) age: Number, // Multiple possible types identityNumber: [String, Number], // Required string email: { type: String, required: true }, // Number with a default value minBalance: { type: Number, default: 10000 }, // Object with a default value message: { type: Object, // Object or array defaults must be returned from // a factory function default: function () { return { message: 'Welcome to Vue' } } }, // Custom validator function location: { validator: function (value) { // The value must match one of these strings return ['India', 'Singapore', 'Australia'].indexOf(value) !== -1 } } } })
-
The v-model directive on a component uses value as the prop and input as the event, but some input types such as
checkboxesandradio buttonsmay need to use the value attribute for a server side value. In this case, it is preferred to customize model directive. Let's take an example of checkbox component,Vue.component('custom-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` })
Now you can use v-model on this customized component as below,
<custom-checkbox v-model="selectFramework"></custom-checkbox>
The selectFramework property will be passed to the checked prop and same property will be updated when custom checkbox component emits a change event with a new value.
-
There are many ways Vue provides transition effects when items are inserted, updated, or removed from the DOM. Below are the possible ways,
- Automatically apply classes for CSS transitions and animations
- Integrate 3rd-party CSS animation libraries. For example, Animate.css
- Use JavaScript to directly manipulate the DOM during transition hooks
- Integrate 3rd-party JavaScript animation libraries. For example, Velocity.js
-
Vue Router is a official routing library for single-page applications designed for use with the Vue.js framework. Below are their features,
- Nested route/view mapping
- Modular, component-based router configuration
- Route params, query, wildcards
- View transition effects powered by Vue.js' transition system
- Fine-grained navigation control
- Links with automatic active CSS classes
- HTML5 history mode or hash mode, with auto-fallback in IE9
- Restore scroll position when going back in history mode
-
It is easy to integrate vue router in the vue application. Let us see the example with step by step instructions. Step 1: Configure router link and router view in the template
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Welcome to Vue routing app!</h1> <p> <!-- use router-link component for navigation using `to` prop. It rendered as an `<a>` tag --> <router-link to="/home">Home</router-link> <router-link to="/services">Services</router-link> </p> <!-- route outlet in which component matched by the route will render here --> <router-view></router-view> </div>
Step 2: Import Vue and VueRouter packages and then apply router
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter)
Step 3: Define or import route components.
const Home = { template: '<div>Home</div>' } const Services = { template: '<div>Services</div>' }Step 4: Define your route where each one maps to a component
const routes = [ { path: '/home', component: Home }, { path: '/services', component: Services } ]
Step 5: Create the router instance and pass the
routesoptionconst router = new VueRouter({ routes // short for `routes: routes` })
Step 6: Create and mount the root instance.
const app = new Vue({ router }).$mount('#app')Now you are able to navigate different pages(Home, Services) with in Vue application.
-
Sometimes it may be required to map routes to the same component based on a pattern. Let's take a user component with the mapped URLs like
/user/john/post/123and/user/jack/post/235using dynamic segments,const User = { template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>' } const router = new VueRouter({ routes: [ // dynamic segments start with a colon { path: '/user/:name/post/:postid', component: User } ] })
-
When you navigate from one URL to other(mapped with a single component) using routes with params then the same component instance will be reused. Even though it is more efficient than destroying the old instance and then creating a new one, the lifecycle hooks of the component will not be called. This problem can be solved using either of the below approaches,
- Watch the $route object:
const User = { template: '<div>User {{ $route.params.name }} </div>', watch: { '$route' (to, from) { // react to route changes... } } }
- Use beforeRouteUpdate navigation guard: This is only available in 2.2 version.
const User = { template: '<div>User {{ $route.params.name }} </div>', beforeRouteUpdate (to, from, next) { // react to route changes and then call next() } }
-
Sometimes the URL might be matched by multiple routes and the confusion of which route need to be mapped is resolved by route matching priority. The priority is based on order of routes configuration. i.e, The route which declared first has higher priority.
const router = new VueRouter({ routes: [ // dynamic segments start with a colon { path: '/user/:name', component: User } // This route gets higher priority { path: '/user/:name', component: Admin } { path: '/user/:name', component: Customer } ] })
-
Generally, the app is composed of nested components which are nested multiple levels deep. The segments of a URL corresponds to a certain structure of these nested components. To render components into the nested outlet, you need to use the
childrenoption inVueRouterconstructor config. Let's take a user app composed of profile and posts nested components with respective routes. You can also define a default route configuration when there is no matching nested route.const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // UserProfile will be rendered inside User's <router-view> when /user/:id/profile is matched path: 'profile', component: UserProfile }, { // UserPosts will be rendered inside User's <router-view> when /user/:id/posts is matched path: 'posts', component: UserPosts }, // UserHome will be rendered inside User's <router-view> when /user/:id is matched { path: '', component: UserHome }, ] } ] })
-
Single File Components are an easy concept to understand. Earlier you might heard about all three parts(HTML, JavaScript and CSS) of your application kept in different components. But Single File Components encapsulate the structure, styling and behaviour into one file. In the beginning, it seems strange to have all three parts in one file, but it actually makes a lot more sense. Let's take an example of Singile File Components
<template> <div> <h1>Welcome {{ name }}!</h1> </div> </template> <script> module.exports = { data: function() { return { name: 'John' } } } </script> <style scoped> h1 { color: #34c779; padding: 3px; } </style>
-
As per the latest modern UI development, separation of concerns is not equal to separation of file types. So it is preferred to divide codebase layers into loosely-coupled components and compose them instead of dividing the codebase into three huge layers that interweave with one another. This way it makes Single File Components more cohesive and maintainable by combining template, logic and styles together inside a component. You can also still maintain javascript and CSS files as separate with hot-reloading and pre-compilation features. For example,
<template> <div>This section will be pre-compiled and hot reloaded</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style> -
The Single File Components solve the common problems occurred in a javascript driven application with a .vue extension. The list of issues are,
- Global definitions force unique names for every component
- String templates lack syntax highlighting and require ugly slashes for multiline HTML
- No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
- No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel
-
Filters can be used to apply common text formatting. These Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol. You can use them in two specific cases:
- mustache interpolations
- v-bind expressions
