v-once for static content in Vue

Introduction

The v-once directive tells Vue to render an element only once and skip future updates. This helps improve performance for content that does not change.

Displaying a static header or title that never changes

Showing a fixed label or description in a form

Rendering a logo or image that stays the same

Presenting static text or icons in a sidebar

Any part of the page that does not need to update after first render

Syntax

Vue

<element v-once>Static content here</element>

The v-once directive can be added to any HTML element or Vue component.

Vue will render the element and its children only once, then skip re-rendering it.

Examples

This header will render once and never update, even if data changes.

Vue

<h1 v-once>Welcome to my site</h1>

The whole div and its children render once and stay fixed.

Vue

<div v-once><p>This text is static.</p><img src="logo.png" alt="Logo"></div>

The button label is static and will not change on data updates.

Vue

<button v-once>Click me</button>

Sample Program

The h2 with v-once renders only once and does not update when message changes. The paragraph updates normally.

Vue

<template>
  <div>
    <h2 v-once>This title never changes</h2>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

const message = ref('Hello!')

function changeMessage() {
  message.value = 'Message changed!'
}
</script>

Important Notes

Use v-once only for truly static content to avoid confusion.

It can improve performance by skipping unnecessary updates.

Dynamic content inside v-once will not update after first render.

Summary

v-once renders content only once and skips future updates.

Use it for static parts of your UI to boost performance.

Works on any element or component in Vue templates.