Run a mock round

Below are the some of major features available with VueJS

1. 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.

1. Components: Used to create reusable custom elements in VueJS applications.
2. Templates: VueJS provides HTML based templates that bind the DOM with the Vue instance data
3. Routing: Navigation between pages is achieved through vue-router
4. Light weight: VueJS is light weight library compared to other frameworks.

****

You can also commit a mutation is by directly using an object that has a type property.

store.commit({
  type: 'increment',
  value: 20
})

Now the entire object will be passed as the payload to mutation handlers(i.e, without any changes to handler
signature).

mutations: {
  increment (state, payload) {
    state.count += payload.value
  }
}

****

Yes, actions support both payload and object style format similar to mutations.

// dispatch with a payload
store.dispatch('incrementAsync', {
  amount: 10
})

// dispatch with an object
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

****

If you need to access properties defined globally on Vue.prototype then you can access them on parent,

<template functional>
  <div>{{ parent.$someProperty }}</div>
</template>

****

Yes, you can use preprocessors with CSS Modules.

For example, sass-loader can configured in webpack file for sass preprocessor.

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}

****

Vuex provides actions property similar mutations property in order to define action handlers. These action handlers
receive context object as an argument which has same properties and methods of store instance.

Let's see counter example to demonstrate increment action which commits respective mutation,

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

****

Both watch and watchEffect are Composition API functions used for reactivity, but they serve different purposes and
behave differently.

watch: It is used to watch specific reactive sources (like ref or computed) and respond to changes. This
function is lazy. i.e, The callback is not called immediately but only on changes. It is useful when you need to
access both old and new values, and performs side-effects conditionally.

         watch(count, (newVal, oldVal) => {
            console.log('Count changed:', newVal);
         });
      

watchEffect: This function is automatic and eager. It runs a function immediately and tracks its dependencies
automatically. It cannot access old values directly.

      watchEffect(() => {
        console.log(`Count is ${count.value}`);
      });
      

****
241.

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

   <p>{{ $t('message.greeting', { msg: 'Good' }) }}</p>
   

It outputs the result as below,

   <p>Good Morning</p>
   

1. 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

   <p>{{ $t('message.greeting', ['Good']) }}</p>
   

Finally it outputs the result as below,

   <p>Good morning</p>
   

Note: It also accepts array-like object

   <p>{{ $t('message.greeting', {'0': 'Good'}) }}</p>
   

1. 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 <br> Morning'
       }
     }
   }
   

After that use it in the html directive template as below

   <p v-html="$t('message.greeting')"></p>
   

Finally it outputs the result as below

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

1. 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

   <p>{{ $t('message.greeting', { msg: 'Good' }) }}</p>
   

Finally it renders the output as below,

   <p>Good Morning</p>
   

****

You can use plugin by passing your plugin to Vue's use global method. You need to apply this method before
start your app by calling new Vue().

// calls `MyPlugin.install(Vue, { someOption: true })`
Vue.use(MyPlugin)

new Vue({
  //... options
})

****