Migration to Vue 3, Part 5. – Custom Elements

The checks to determine whether tags should be treated as custom elements are now performed during template compilation, and should be configured via compiler options instead of runtime config.

Vue 2

Vue.config.ignoredElements = ['plastic-button']

Vue 3

// using a build step (webpack config)
rules: [
    {
        test: /\.vue$/,
        use: 'vue-loader',
        options: {
            compilerOptions: {
                isCustomElement: tag => tag === 'plastic-button'
            }
        }
    }
    // ...
]

// or using on-the-fly template compilation

const app = Vue.createApp({})
app.config.compilerOptions.isCustomElement = tag => tag === 'plastic-button'

is attribute usage is restricted to the reserved <component> tag only.

Vue 2

<!-- SFC templates -->

<foo is="bar" />

<!-- in-DOM templates -->

<table>
    <tr is="blog-post-row"></tr>
</table>

Vue 3

<!-- SFC templates -->

<component is="bar" />

<!-- in-DOM templates -->

<table>
    <tr is="vue:blog-post-row"></tr>
</table>