CODEWITHSUNDEEP
vue.jsnuxt.js
Shadi Farzankia
Shadi Farzankia

Reputation: 737

creating folder for default and error layout in nuxt

I have different styles for error and default layout in my nuxt app. becuase of that, I want to create seperate css files for them. To keep my code clean, I want to seperate them as different component. Is it posssible to have different folders for these layouts in my nuxt app?

Upvotes: 0

Views: 3094

Answers (2)

Shadi Farzankia
Shadi Farzankia

Reputation: 737

I created a folder named error in layout folders to make it like a component. but it didn't work. Another option for me was to create an error component in components' folder and import it in error layout. This was the best possible solution for me. Hope it works for others.

Upvotes: 2

jumper85
jumper85

Reputation: 502

You can create different layouts according to the docs: https://nuxtjs.org/guide/views#layouts.

I also found an issue on GitHub where a change is described, that you can also create subfolders inside the layouts directory.

Possible page structure:

layouts
|-- default
    |-- layout.vue
|-- error
    |-- layout.vue

Inside a page component you can use these layouts like this:

export default {
  layout: 'error/layout'
}

For error pages there is a special layout you can use: https://nuxtjs.org/guide/views/#error-page

Let me know if you meant something else.

Upvotes: 0

Related Questions