Chapter 45: Vue ‘is’ Attribute

The is attribute (usually written as :is because it’s almost always dynamic)

This is not a normal HTML attribute — it’s a Vue-specific magic attribute that tells Vue:

“Please render this tag name / component right here — and the name can be decided at runtime.”

In other words: :is lets you dynamically choose which component (or even native HTML element) to render at that spot in the template.

Without :is, you would have to hard-code the component tag name — like <UserProfile /> or <ProductCard />. With :is, the tag name becomes a variable — so you can switch components on the fly based on data, user role, tab selection, route, permission, A/B test variant, etc.

Real Names This Feature Has Had Over Time

• Officially called: “Dynamic Component” or “is attribute”
• Most common shorthand in templates: :is
• In code people say: “use the is prop on <component>” or “dynamic :is”

The canonical way to use it is:

<component> is a built-in Vue placeholder tag — it doesn’t render anything itself; it just becomes whatever :is points to.

Why :is Exists – Real-Life Situations (2026)

1. Tabbed interfaces / dashboard widgets Different tabs render completely different components
2. Role-based / permission-based UI Admin sees AdminPanel, Editor sees EditorPanel, Guest sees ReadOnlyView
3. Lazy-loading heavy components Only load ChartLibrary when user clicks “Analytics” tab
4. Polymorphic / type-based rendering In a feed: render PostCard / StoryCard / AdCard based on item.type
5. CMS / page-builder style apps JSON from backend says “render HeroBanner component here”
6. A/B testing or feature flags Show VariantA or VariantB component
7. Wizard / multi-step forms Step 1 → PersonalInfo, Step 2 → PaymentDetails, etc.

Real, Complete Example – Tabbed Dashboard with :is

Different Ways to Use :is (All Valid & Useful)

1. Direct imported component

   vue

   PHP

   0 1 2 3 4 5 6 7

   import Profile from '@/views/ProfileView.vue' <component :is="Profile" />

2. Async / lazy component (best for performance)

   vue

   PHP

   0 1 2 3 4 5 6 7

   const HeavyChart = defineAsyncComponent(() => import('@/components/HeavyChart.vue')) <component :is="showAnalytics ? HeavyChart : null" />

3. String name (needs global registration – less common now)

   vue

   PHP

   0 1 2 3 4 5 6 7

   app.component('UserProfile', UserProfile) <component is="UserProfile" />

4. Object map / dictionary (very clean for tabs, wizards)

   JavaScript

   PHP

   0 1 2 3 4 5 6 7 8 9 10 11 12 13

   const views = {   home: HomeView,   profile: ProfileView,   settings: SettingsView,   admin: AdminDashboard }   <component :is="views[activeView]" />

5. Dynamic import from string (CMS / config driven – advanced)

   JavaScript

   PHP

   0 1 2 3 4 5 6 7

   const componentName = 'HeroBanner' // from API / config <component :is="() => import(`@/components/blocks/{componentName}.vue`)" />

Important Gotchas & Pro Tips (2026 Edition)

• Always add :key when :is changes frequently

  vue

  PHP

  0 1 2 3 4 5 6

  <component :is="currentTab" :key="activeTab" />

  → Prevents state leakage between tabs (form inputs, scroll position)

• Use <KeepAlive> to preserve state when switching

  vue

  PHP

  0 1 2 3 4 5 6 7 8

  <KeepAlive>   <component :is="currentTab" /> </KeepAlive>

  → Tabs remember form data, scroll position, internal state

• Loading / error states for async components

  vue

  PHP

  0 1 2 3 4 5 6 7 8 9 10 11 12

  const MyComp = defineAsyncComponent({   loader: () => import('./MyComp.vue'),   loadingComponent: LoadingSpinner,   errorComponent: ErrorFallback,   delay: 200,          // show loader only after 200ms   timeout: 5000        // fail after 5s })

• SSR / hydration — dynamic components work fine, but async ones are client-only by nature

• TypeScript — works perfectly with generics

  TypeScript

  PHP

  0 1 2 3 4 5 6

  const current = computed(() => views[activeTab.value] as Component)

Summary Table – Dynamic Components with :is

Your Mini Practice After This Lesson

1. Create 3 small tab components: Overview, Stats, Profile
2. Build a tabbed interface using :is + object map
3. Add <KeepAlive> → switch tabs → see that form inputs / scroll position survive
4. Add loading spinner for async tabs

Any part confusing? Want to see:

• Dynamic components + <Transition> for smooth tab switch animations?
• Real CMS-style rendering from JSON config?
• Error boundary around async dynamic components?
• Dynamic components inside v-for (polymorphic list items)?

Just tell me — we’ll build the next powerful dynamic example together 🚀

Happy dynamic-component-ing from Hyderabad! 💙