How to fix `Invalid component name` when changing page with custom layout in nuxt?

user_11340462 0
Viewed 6738

[Vue warn]: Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

As you ca see in above error I'm facing a problem when i used custom layout for my Auth page. Problem is when i go to Auth page with custom layout, i don't get any error, but anytime i try to back from Auth page, I'll get above error. when i do success login/register or just hit Back button I'll get that warning on loading homepage

Here's default layout which is located in default place when nuxt installed :

<template>
      <v-main>
            <v-flex>
              <Nuxt />
            </v-flex>
      </v-main>
</template>

<script>
  export default {
    components: {AppHeader, AppFooter},
    async fetch () {
      try {
        const layout= await this.$axios.$get('/app')
        this.app= layout;
      } catch (e) {
        console.log(e)
      }
    },
    data() {
      return{
        app: null,
      }
    }
  }
</script>
nuxt.js
3 Answers

I managed to fix this by adding name attribute to the layout...

layouts/default.vue

 export default {
  name: "default"
  ...
}

And the error is gone

user_134348020

I think the problem is in selecting the name in two component you use 'auth' as name of component that I think make the problem.

   export default {
    name: "auth"
   }

Both in "Auth Layout" and "Auth Page :"

user_45286650

Original Answer

Well problem was the async fetch in default layout which i replaced it with nuxtServerInit. when i switch layout nuxt wanted to call api again because async fetch should load again since it's loading again after auth layout switch. So i replaced it with nuxtServerInit to prevent this warning to happen.

Good Luck

Small Update and Clarification

So, I'll try to explain more about the situation that I've got back days to clarify how this issue happened.

You might not have any problem in using async fetch, which is also deprecated in Nuxt 2, but this actually was in most of tutorials, and in term of using multiple layouts for application base on specific routes, async fetch was causing this issue when, changes in layout was dynamically happening.

The application I was creating had Dynamic Page Render like Wordpress and in term of different type of page, I've developed Dynamic Layout changer, but using async fetch was causing this issue when i was going back to another layout to main layout which it was doing async fetch.

For some people who are using Vue they might had this issue when they hadn't name : {layoutName}, but in term of my kind of application which it was quite complicated, problem was using async fetch which it was deprecated in Nuxt 2, instead of NuxtServerInit.

So in general, you can use async fetch or etc. But in layout on first attempt, you should use NuxtServerInit to get data to render the primary data or etc.

user_113404620
Related