How to Fix the "Component is missing template or render function" Warning in Vue
In this article, we'll learn how to easily fix the "Component is missing template or render function" warning in Vue.
Here are some possible causes of this warning:
- Rendering a component that has no template.
- Not passing the
App
component to thecreateApp()
method. - Using the result of
app.component()
to set a component for a Vue Router route.
We'll go through each of them in this article.
1. Rendering a component that has no template
The "Component is missing template or render function" warning occurs when you import a component and add it to the markup, but the file of the component has no template
tag. To fix it, add a template
tag with a child element to the component file.
For example:
App.vue
<template>
<div id="app">
<post-list></post-list>
</div>
</template>
<script>
import PostList from './components/PostList.vue';
export default {
components: {
'post-list': PostList,
},
};
</script>
components/PostList.vue
// ⚠️ empty file
There will be a warning because PostList.vue
is empty and doesn't have a template
tag.
Here's how we can remove the warning:
components/PostList.vue
<template>
<div></div>
</template>
2. Not passing the App component to the createApp()
method
To fix the "Component is missing template or render function" warning in Vue, ensure that the createApp()
method is called with the App
component as an argument.
For example, the file that sets up your Vue app might look like this:
main.js
import { createApp } from 'vue';
import * as VueRouter from 'vue-router';
import Home from './HomePage.vue';
// ⚠️ don't pass {} to createApp()!
const app = createApp({});
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
There will be a warning here because we passed an empty object ({}
) to createApp()
instead of a component object.
We can remove the warning in this case by importing the App
component and passing it to createApp()
:
import { createApp } from 'vue';
import * as VueRouter from 'vue-router';
import Home from './HomePage.vue';
// import App component
import App from './App.vue';
// ✅ removed warning
const app = createApp(App);
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
3. Using the result of app.component()
to set a component for a Vue Router route
Instead of importing a component from a file, you might have chosen to create one with the component()
method of the object returned by createApp()
.
import { createApp } from 'vue/dist/vue.esm-bundler';
import * as VueRouter from 'vue-router';
import App from './App.vue';
const app = createApp(App);
// app.component() returns the app instance, not a component
// object
const Home = app.component('HomePage', {
template: '<div>Home</div>',
});
// ⚠️ don't set "component" to the app instance!
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
When app.component()
is called with a definition object (the 2nd argument), it returns the application instance to allow chaining calls.
To fix the "Component is missing template or render function" warning in this case, call the app.component()
method again with only the component name as an argument, and use the component object returned to define a route for Vue Router.
import { createApp } from 'vue/dist/vue.esm-bundler';
import * as VueRouter from 'vue-router';
import App from './App.vue';
const app = createApp(App);
// first app.component() call defines component
app.component('HomePage', {
template: '<div>Home</div>',
});
// ✅ fix: second app.component() call returns component object
const Home = app.component('HomePage');
// ✅ sets "component" to component object
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
See also
- How to Fix the "structuredClone is not defined" Error in Node.js
- How to Fix the "Cannot read property '0' of undefined" Error in JavaScript
- How to Fix the "Cannot read property 'addEventListener' of null" Error in JavaScript
- How to Fix the "Unexpected reserved word 'enum'" Error in JavaScript
- How to Capitalize the First Letter of Each Word in an Array in JavaScript
- How to Use an Image as a Link in React