Vue.js Interview Questions

The community plugins and components might need different strategies for different versions. In this case, you can use Vue.version which provides installed version of Vue as a string.

For example, you can implement different logic based on different versions

let version = Number(Vue.version.split('.')[0])

if (version === 2) {
// Vue v2.x.x
} else if (version === 1) {
// Vue v1.x.x
} else {
// Unsupported versions of Vue
}

In version 3.0 you can create a reactive object with the reactive() API.

const reactiveState = reactive({
count: 0
 })

In version 2.6, you can create reactive objects with Vue.observable() global API.

const reactiveState = Vue.observable({
count: 0
})

These observable objects can be used directly in computed properties and render functions.

const Demo = {
render(h) {
return h('button', {
on: { click: () => { reactiveState.count++ }}
}, `count is: ${state.count}`)
}
}

In Vue 2.6 version, the new slot syntax is provided using v-slot directive which aligns syntax with Vue 3.0. This is going to be replacement for old slot syntax.

The comparison for old and new slot syntax:

<!-- old -->
<user>
<template slot="header" slot-scope="{ msg }">
text slot: {{ msg }}
</template>
</user>

<!-- new -->
<user>
<template v-slot:header="{ msg }">
text slot: {{ msg }}
</template>
</user>

VueJS provides compile method which is used to compile a template string into a render function. This method is only available in the full build.

For example, you can compile template message:

var result = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
data: {
msg: 'Welcome to Vue world'
},
render: result.render,
staticRenderFns: result.staticRenderFns
})

The nextTick method is just a comfortable way to execute a function after the data has been set, and the DOM has been updated. As an example, the usage is going to be similar to setTimeout:

// modify data
vm.msg = 'Welcome to Vue'
// DOM not updated yet
Vue.nextTick(function () {
// DOM updated
})

// usage as a promise (2.1.0+)
Vue.nextTick()
.then(function () {
// DOM updated
})

From 2.6 version onwards, Vue's built-in error handling mechanism can capture errors inside v-on handlers. Also,if any of your lifecycle hooks or event handlers performs asynchronous operations, you can now return a Promise from the function so that any uncaught errors from that Promise chain are also sent to your error handlers.

Let's take an example of mounted lifecycle hook,

export default {
async mounted() {
// if an async error is thrown here, it now will get
// caught by errorCaptured and Vue.config.errorHandler
this.todos = await api.getTodos()
}
}

In Vue 2.6 release onwards, Directive arguments can now accept dynamic JavaScript expressions. i.e, the specific argument that we want to use is only known at runtime.

Let's assign dynamic key and event directives for a div element,

Apart from the benefits of dynamic directives arguments, it brings two drawbacks or considerations on the usage

1. Constraints on expressions: When you perform complex JavaScript expressions, make sure that html attribute names cannot contain spaces and quotes. The below expression doesn't work as expected

Instead you may need to use string template syntax

2. Custom Directives: The custom directive implementations need to have potential argument changes in addition to value changes.

Dynamic argument values are expected to be strings but it allows null as a special value that explicitly indicates that the binding should be removed. Other types will be treated as mistakes and will trigger a warning. So null value can be applied for v-bind and v-on.

No. It can be applied only for v-bind and v-on but not v-slot. This is because v-slot is not a binding and cannot be removed.

Vue I18n is an internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.

The simple usage with in html would be as below,

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

and after that configure them in javascript

// Ready translated locale messages
const messages = {
en: {
user: {
message: 'Good morning'
}
},
de: {
user: {
message: 'Guten Morgen'
}
}
}

// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'de', // set locale
messages, // set locale messages
})

// Create a Vue instance with `i18n` option
new Vue({ i18n }).$mount('#app')

The output is going to be like this,

Basically there are 4 types of formatting available in i18n plugin,

1. Named formatting: First You need to define the message keys in curly braces({})

const messages = {
en: {
message: {
greeting: '{msg} Morning'
}
}
}

After that pass argument value along with key in the template

It outputs the result as below,

2. List formatting: First you need to define zero index based keys in the messages,

const messages = {
en: {
message: {
greeting: '{0} Morning'
}
}
}

After that pass argument value with in an array

Finally it outputs the result as below,

Note: It also accepts array-like object

3. HTML formatting: This formatting is required when want to render your translation as an HTML message and not a static string.

const messages = {
en: {
message: {
greeting: 'Good 
 Morning'
}
}
}

After that use it in the html directive template as below

Finally it outputs the result as below

<!--
 exists but is rendered as html and not a string-->
Morning</p>

4. Ruby on rails format: First you need to define with percentile and curly braces as below,

const messages = {
en: {
message: {
greeting: '%{msg} Morning'
}
}
}

After that pass argument with key similar to named formatting

Finally it renders the output as below,

You can use custom formatting for some of the formatting cases such as ICU formatting syntax (message "pattern" strings with variable-element placeholders enclosed in {curly braces}). It implement Formatter Interface.

// Custom Formatter implementation
class CustomFormatter {
constructor (options) {
// ...
}
interpolate (message, values) {
// return the interpolated array
return ['resolved message string']
}
}

// register with `formatter` option
const i18n = new VueI18n({
locale: 'en-US',
formatter: new CustomFormatter(/* here the constructor options */),
messages: {
'en-US': {
// ...
},
// ...
}
})

// Run!
new Vue({ i18n }).$mount('#app')

You can translate with pluralization by defining the locale that have a pipe | separator, and define plurals in pipe separator. Remember that template should use $tc() instead of $t().

First you need to define the messages,

const messages = {
en: {
user: 'user | users',
friend: 'no friend | one friend | {count} friends'
}
}

And the template can configure the messages with values

Finally it outputs the result as below

You can localize the datetime with definition formats(e.g. short, long, etc).

Lets follow below steps to localize date and time,

1. For example, you can add definition formats for English and Jappan locale as below

const dateTimeFormats = {
'en-US': {
short: {
year: 'numeric', month: 'short', day: 'numeric'
},
long: {
year: 'numeric', month: 'short', day: 'numeric',
weekday: 'short', hour: 'numeric', minute: 'numeric'
}
},
'ja-JP': {
short: {
year: 'numeric', month: 'short', day: 'numeric'
},
long: {
year: 'numeric', month: 'short', day: 'numeric',
weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
}
}
}

2. After that You need to specify the dateTimeFormats option of VueI18n constructor

const i18n = new VueI18n({
dateTimeFormats
})

new Vue({
i18n
}).$mount('#app')

3. And then add them to the template

4. Finally it outputs the result