VueJS dynamic_components_geeksforgeeeks_tutorial

This is a follow up geeksforgeeks tutorial about dynamic components in VueJS.

What are VueJS Dynaic Components?

These are components that allow the user to switch over the components without updating the route of the Vue.js application itself.

Vue.js Dynamic Components Attribute:

:is: This field accepts a name string for the registered component or an actual component.

Syntax: In the component section, add the :is field and provide either the variable name or the component name as follows:

<component :is="currentComponent" />

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build