Dynamic render patterns in Vue

Introduction

Dynamic render patterns let your app show different things based on data or user actions. This makes your app flexible and interactive.

Showing different content based on user choices, like tabs or menus.

Displaying loading spinners or error messages depending on app state.

Switching between views or components without reloading the page.

Rendering lists where items can change or update dynamically.

Syntax

Vue

<template>
  <component :is="currentComponent" />
</template>

<script setup>
import { ref } from 'vue'

const currentComponent = ref('ComponentA')
</script>

Use :is to dynamically choose which component to render.

You can also use v-if, v-else-if, and v-else to conditionally render elements.

Examples

Switches between components A and B when buttons are clicked.

Vue

<template>
  <div>
    <button @click="show = 'A'">Show A</button>
    <button @click="show = 'B'">Show B</button>

    <component :is="show" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import A from './A.vue'
import B from './B.vue'

const show = ref('A')
</script>

Shows different messages based on the status value.

Vue

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred.</p>
    <p v-else>Data loaded.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const status = ref('loading')
</script>

Dynamically renders a list of items that can change over time.

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
])
</script>

Sample Program

This app lets you click buttons to switch between three views: Home, Profile, and Settings. The displayed content changes without reloading the page.

Vue

<template>
  <section>
    <h2>Choose a view:</h2>
    <button @click="currentView = 'Home'">Home</button>
    <button @click="currentView = 'Profile'">Profile</button>
    <button @click="currentView = 'Settings'">Settings</button>

    <component :is="components[currentView]" />
  </section>
</template>

<script setup>
import { ref } from 'vue'

const currentView = ref('Home')

const Home = {
  template: '<p>Welcome to the Home page!</p>'
}
const Profile = {
  template: '<p>This is your Profile.</p>'
}
const Settings = {
  template: '<p>Adjust your Settings here.</p>'
}
const components = {
  Home,
  Profile,
  Settings
}
</script>

Important Notes

Use :is with component names or objects to render dynamically.

Remember to provide unique keys when rendering lists with v-for for better performance.

Use v-if and v-else-if for simple conditional rendering of elements.

Summary

Dynamic render patterns let your app show different things based on data or user actions.

Use :is to switch components dynamically and v-if for conditional content.

This makes your app interactive and responsive to user needs.