Vue CLI and Vite setup - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Vite's default production build output folder

Which folder does Vite use by default for its production build output?

A dist

B output

C public

D build

💡 Hint

Think about the folder name you see after running the build command in Vite.

Vite outputs production build files into the dist folder by default.

❓ component_behavior

intermediate

Behavior of hot module replacement (HMR) in Vue CLI vs Vite

Which statement correctly describes how hot module replacement (HMR) behaves differently between Vue CLI and Vite during development?

A Vue CLI uses native ES modules for HMR, Vite bundles code before serving.

B Vite disables HMR by default, Vue CLI enables it automatically.

C Vite provides faster HMR by using native ES modules, while Vue CLI bundles code before serving.

D Both Vue CLI and Vite use the same bundler and have identical HMR speeds.

💡 Hint

Consider how Vite serves files during development compared to Vue CLI.

Vite uses native ES modules in the browser for development, enabling faster HMR without rebundling. Vue CLI bundles code with webpack before serving, which is slower for HMR.

📝 Syntax

advanced

Correct command to create a new Vue 3 project using Vite

Which command correctly creates a new Vue 3 project using Vite with npm?

A npm install vite create my-vue-app --template vue

B npm init vue@latest my-vue-app

C vue create my-vue-app --template vite

D npm create vite@latest my-vue-app -- --template vue

💡 Hint

Vite uses a special npm create command with a template option.

The correct way to create a Vue 3 project with Vite is using npm create vite@latest my-vue-app -- --template vue. Other commands are either Vue CLI commands or invalid.

🔧 Debug

advanced

Error when running 'vue serve' in a Vite project

You run 'vue serve' inside a project created with Vite and get an error saying the command is not found. Why does this happen?

A 'vue serve' is a Vue CLI command and is not available in Vite projects.

B You need to install the 'vue-serve' package separately for Vite projects.

C The command should be 'vite serve' instead of 'vue serve'.

D 'vue serve' only works if you have Vue 2 installed.

💡 Hint

Think about which tool provides the 'vue serve' command.

'vue serve' is a command provided by Vue CLI's global tools and is not part of Vite. Vite uses 'vite' commands for serving projects.

❓ lifecycle

expert

How Vue CLI and Vite handle environment variables during build

Which statement correctly describes how Vue CLI and Vite handle environment variables during the build process?

A Vite requires variables to be prefixed with VUE_APP_, Vue CLI requires VITE_ prefix

B Vue CLI loads variables from .env files prefixed with VUE_APP_, Vite loads variables prefixed with VITE_

C Both Vue CLI and Vite load all variables from .env files without any prefix requirement

D Neither Vue CLI nor Vite support environment variables from .env files

💡 Hint

Look at the prefixes required by each tool for environment variables to be exposed.

Vue CLI exposes environment variables that start with VUE_APP_. Vite exposes variables starting with VITE_. This prevents accidental exposure of sensitive data.