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:

1. Rendering a component that has no template.
2. Not passing the App component to the createApp() method.
3. 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.

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');

Originally published at codingbeautydev.com

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Sign up and receive a free copy immediately.