Google News
logo
Vue.JS Interview Questions
If you keep an inline-template on a child component then it will use its inner content as a template instead of treating as reusable independent content.
<my-component inline-template>
   <div>
       <h1>Inline templates</h1>
       <p>Treated as component component owne content</p>
   </div>
</my-component>
Note : Even though this inline-templates gives more flexibility for template authoring, it is recommended to define template using template property or tag inside .vue component.
In complex applications, vue components will actually be each other’s descendent and ancestor in the render tree.
 
Let's say componentA and componentB included in their respective templates which makes circular dependency,
//ComponentA
<div>
  <component-b >
</div>
//ComponentB
<div>
  <component-a >
</div>
This can be solved by either registering(or wait until) the child component in beforeCreate hook or using webpack's asynchronous import while registering the component,
 
Solution1 :
beforeCreate: function () {
 this.$options.components.componentB = require('./component-b.vue').default
}
Solution2 :
components: {
 componentB: () => import('./component-b.vue')
}
Below are the list of different builds of VueJS based on type of build,
Type UMD CommonJS ES Module (for bundlers) ES Module (for browsers)
Full vue.js vue.common.js vue.esm.js vue.esm.browser.js
Runtime only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js NA
Full (production) vue.min.js NA NA vue.esm.browser.min.js
Runtime-only (production) vue.runtime.min.js NA NA NA
You can configure vueJS in webpack using alias as below,
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}
Vue loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs).
 
For example, it authors HelloWorld component in a SFC,
<template>
  <div class="greeting">{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello world for vueloader!'
    }
  }
}
</script>

<style>
.greeting {
  color: blue;
}
</style>
Below are the list of Asset URL transform rules
 
Absolute path : If the URL is an absolute path (for example, /images/loader.png)then it will be preserved as-is.

Relative path : If the URL starts with . (for example, ./images/loader.png) then it will be interpreted as a relative module request and resolved based on the folder structure on your file system.

URLs starts with ~ symbol : If the URL starts with ~ symbol(for example, ./some-node-package/loader.png) then it is interpreted as a module request. This way it can reference assets inside node modules too.

URLs starts with @ symbol : If the URL starts with @ symbol then it is interpreted as a module request. This is useful if your webpack config has an alias for @, which by default points to /src path.
Scoped CSS is a mechanism in VueJS Single File Components(SFC) that prevents styles from leaking out of the current component and affecting other unintended components on your page. i.e, When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. It uses PostCSS to transform scoped css to plain CSS.
 
Let's take an example usage of scoped css,
<style scoped>
.greeting {
  color: green;
}
</style>

<template>
  <div class="greeting">Let's start Scoped CSS</div>
</template>

The above code will be converted to plain CSS,

<style scoped>
 .greeting[data-v-f3f3eg9] {
   color: green;
 }
</style>

<template>
   <div class="greeting" data-v-f3f3eg9>Let's start Scoped CSS</div>
</template>
Below are the steps to use css modules in VueJS,
 
Enable CSS modules : CSS Modules must be enabled by passing modules: true option to css-loader
// webpack.config.js
{
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}
Add module attribute : Add the module attribute to your <style>
<style module>
.customStyle {
  background: blue;
}
</style>
Inject CSS modules : You can inject CSS modules object with computed property $style
<template>
  <div :class="$style.blue">
    Background color should be in blue
  </p>
</template>
It can work with object/array syntax of :class binding.
You can customize the name of the injected computed property by giving the module attribute a value. This will be helpful to avoid overwriting injected styled if you have more than one <style> tags in a single *.vue component.
 
Example : 
<style module="a">
  /* identifiers injected as a */
</style>

<style module="b">
  /* identifiers injected as b */
</style>
You can perform testing in two ways,
 
Using vue-cli : It offers pre-configured unit testing and e2e testing setups

Manual setup : You can manually setting up unit tests for *.vue files using either mocha-webpack or jest