Nuxt.js could not found component with errors “Failed to mount component: template or render function not defined.”

Question

I am having problems with my Nuxt.js site. I have defined a page, with a dynamic slug param, like this:

/solutions/:slug

If I visit the page directly in the browser, it loads correctly! But if I click the nuxt-link in my NavBar component, I get the following error in the console, and the page does not load:

vue.runtime.esm.js?2b0e:619

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

I have a default layout file that looks like this:

layouts/default.vue

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

<script>
import NavBar from "~/components/Layout/NavBar"

export default {
  components: {
    NavBar,
  },
}
</script>

My navbar contains the following nuxt-link:

components/Layout/NavBar.vue

<template>
  <b-navbar wrapper-class="container" fixed-top>
    <template slot="end">

      <nuxt-link
        :to="{
          name: 'solutions-slug',
          params: { slug: 'performance' },
        }"
        class="navbar-item"
        target="self"
      >
        <span class="icon is-medium">
          <i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
        </span>
        <span class="label">
          Performance
        </span>
      </nuxt-link>

    </template>
  </b-navbar>
</template>

I have a page, defined by the slug param:

pages/solutions/_slug.vue

<template>
  <div class="solution">
    This is my solution page.
  </div>
</template>

I am trying to understand why clicking the nuxt-link fails to load the page, even though I see the URL change in the browser correctly.

Thanks

Answer 1

Probably the problem is not related to anything described above.

First, check if your configuration is correct. I see you are using 'nuxtjs/content' module, so you are probably using Contentful as well. In the past, I have encountered a similar situation ('Failed to mount component: template or render function not defined' issue) due to incorrect installation of the 'dotenv' module that I used to store variables.

In my case, the application did not load variables from the .env file. As a consequence, they went to the Contentful client unidentified and caused the js error. For some reason, this error did not always appear in the console. Instead, the above-mentioned Warn appeared.

Make sure you have the 'dotenv' module correctly installed (if you use it). I remember that in my case it was necessary to install 'nuxtjs/dotenv' instead of the usual dotenv.

Let me know if this is the case. Good luck

Answer 2

After version v2.13, Nuxt can auto-import your components when used in your templates. check the nuxt.config.js if components attribute is true then you don't need to import your component on the .vue files.

in your layouts/default.vue remove script tag ;-)

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

If you need to categorize your components by folder, do the following.

goto nuxt.config.js and change your components attribute

export default {
  components: {
    dirs: [
      '~/components',
      {
        path  : '~/components/site/',
        prefix: 'Site'
      },
      {
        path  : '~/components/admin',
        prefix: 'Admin'
      },
      {
        path  : '~/components/admin/sub',
        prefix: 'AdminSub'
      }
    ]
  }
}

for example, we have these components :

components
  | site
     - header
  | admin
     - header
     - footer
     | sub
        - header
        - footer

when we need to call components just separate prefixes and component names with a dash or write camelcase.

in your layouts/default.vue remove script tag ;-)

<template>
  <div>

   <!-- with dash -->
   <site-header></site-header>
   <admin-header></admin-header>
   <admin-sub-header></admin-sub-header>


   <!-- cammel -->
   <SiteHeader></SiteHeader>
   <AdminHeader></AdminHeader>
   <AdminSubHeader></AdminSubHeader>

  </div>
</template>

Attention: For Root Components /components/nav.vue, We Must Use CammelCase <Nav/> and if we call this component like this <nav/> it doesn't work.