class="${staticClass}": Interpolation inside attributes has

Error message

class="${staticClass}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.

What it means

Web platform equivalent of the class interpolation warning: mustaches inside a static class attribute are no longer supported in Vue 2. The compiler's transformNode parses the attribute with the configured delimiters and warns in dev mode when interpolation syntax is found.

Source

Thrown at src/platforms/web/compiler/modules/class.js:16

/* @flow */

import { parseText } from 'compiler/parser/text-parser'
import {
  getAndRemoveAttr,
  getBindingAttr,
  baseWarn
} from 'compiler/helpers'

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticClass = getAndRemoveAttr(el, 'class')
  if (process.env.NODE_ENV !== 'production' && staticClass) {
    const expression = parseText(staticClass, options.delimiters)
    if (expression) {
      warn(
        `class="${staticClass}": ` +
        'Interpolation inside attributes has been removed. ' +
        'Use v-bind or the colon shorthand instead. For example, ' +
        'instead of <div class="{{ val }}">, use <div :class="val">.'
      )
    }
  }
  if (staticClass) {
    el.staticClass = JSON.stringify(staticClass)
  }
  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
  if (classBinding) {
    el.classBinding = classBinding
  }
}

function genData (el: ASTElement): string {
  let data = ''

View on GitHub (pinned to 6c5d78ee04)

Solutions

Change class="{{ val }}" to :class="val".
Use :class object/array syntax for conditional class lists.
Remove mustaches if the class is static.

Example fix

// before
<div class="{{ classes }}">
// after
<div :class="classes">

Defensive patterns

Strategy: validation

Validate before calling

function assertNoClassInterpolation (template) {
  if (/class\s*=\s*["'][^"']*\{\{/.test(template)) {
    throw new Error('Interpolation in class attr; use :class instead')
  }
}
assertNoClassInterpolation('<div class="{{ v }}">')

Type guard

const isStaticClass = (v) => typeof v === 'string' && !v.includes('{{');

Prevention

Use :class for dynamic classes
Enable eslint-plugin-vue template checks
Scan legacy templates for class="{{ during upgrades
Compile dev builds in tests to surface warnings

When it happens

Trigger: Compiling any template where a `class` attribute value contains delimiters (class="{{ val }}") during transformNode with NODE_ENV not production.

Common situations: Vue 1 migration; legacy templates; copying interpolated attribute syntax from old docs or Stack Overflow answers.

Related errors

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/76c12026b7e46f69. Report an issue: GitHub.