Vue.js Interview Questions

Vue CLI is a simple command line interface for scaffolding Vue.js projects. It will be helpful for rapid Vue.js development. You can install the npm package globally as below,

npm install -g @vue/cli
# OR
yarn global add @vue/cli

You can find the install version using vue --version command. Note: Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended).

VueCLI provides below major features,

1. Interactive project scaffolding via @vue/cli
2. A rich collection of official plugins integrating the best tools in the frontend ecosystem.
3. A full graphical user interface to create and manage Vue.js projects.
4. Zero config rapid prototyping via combination of @vue/cli and @vue/cli-service-global
5. A runtime dependency (@vue/cli-service) built on top of webpack and extensible via plugins

In Vue CLI, Instant prototyping is known as rapid prototyping with just a single *.vue file with the vue serve( similar to vue create) and vue build commands. But you need to install below global addon for this.

npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli-service-global

You can also provide entry component for vue serve and target file for vue build using below commands

vue serve MyComponent.vue
vue build MyComponent.vue

You can create project using vue create command

vue create my-app

You can either choose the default preset or select "Manually select features" to pick the features you need.

The default preset prompt would be as below,

and the manual select features would be as below,

You can also create and manage projects using a graphical interface with the vue ui command. Once you apply this command, it opens a browser window with a GUI that guides you through the project creation process.

Vue CLI uses a plugin-based architecture where each plugin can modify the internal webpack configuration and inject commands to vue-cli-service. i.e, Each feature is implemented as a plugin. This architecture makes Vue CLI flexible and extensible.

You can install a plugin into an already created project with the vue add command.

vue add @vue/eslint
(OR)
vue add @vue/cli-plugin-eslint

You can also add options for plugin

vue add @vue/eslint --config airbnb --lintOn save

If a plugin is already installed, you can skip the installation and only invoke its generator with the vue invoke command.

If you need access to the plugin API in your project without creating a full plugin, you can use the vuePlugins.service option in your package.json file

{
"vuePlugins": {
"service": ["my-service.js"]
}
}

You can also add files that will behave like UI plugins with the vuePlugins.ui option

{
"vuePlugins": {
"ui": ["my-ui.js"]
}
}

A Vue CLI preset is a JSON object that contains pre-defined options and plugins for creating a new project without interactive prompts to select them. During project creation(using vue create), the presets will be saved in a ~/.vuerc which can modified at any time.

For example, the generated JSON object(or preset) would be as below

{
"useConfigFiles": true,
"router": true,
"vuex": true,
"cssPreprocessor": "sass",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "airbnb",
"lintOn": ["save", "commit"]
}
}
}

You can explicitly specify versions of the plugins being used.

{
"plugins": {
"@vue/cli-plugin-eslint": {
"version": "^3.0.0",
// ... other options for this plugin
}
}
}

For official plugins, the CLI will automatically use the latest version available in the registry

Each plugin can inject its own prompts during the project creation process irrespective of preset declarations using prompts: true setting

For example, user can pick their own ESLint config using the below configuration

{
"plugins": {
"@vue/cli-plugin-eslint": {
// let the users pick their own ESLint config
"prompts": true
}
}
}

You can share a preset with other developers by publishing it in a git repo. The repo can be published in either github, GitLab or BitBucket. The repo will contain below files,

1. preset.json: The main file containing the preset data and it is required.
2. generator.js: A generator that can inject or modify files in the project.
3. prompts.js: A prompts file that can collect options for the generator. You can apply --preset option to use remote presets while creating the project

# use preset from GitHub repo
vue create --preset username/repo my-project

Yes, Vue CLI will load local presets if the value for the --preset option is a relative or absolute file path, or ends with .json. i.e, You can work with local presets directly. These local presets avoids repeatedly pushing the preset to a remote repo to test.

// Directory contains preset.json file
vue create --preset ./my-preset my-project
(OR)
vue create --preset my-preset.json my-project

The browserslist option is available in package.json file in order to specify a range of browsers the project is supported. This value is going to be used by babel and autoprefixer to transpile javascript features and applying vendor prefixes.

For example, you can declare it as follows,

"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]