How disable default layout on other page

Question

I have a problem with the layout default page on NUXT. I create a new page but by default, nuxt use layout/default.vue. I don't like use default layout page.

If you have a solution to my problem. Thank you :)

I have tried layout: 'none'

Answer 1

If you really don't want a layout, create one named "/layouts/empty.vue" that looks like this:

<template>
  <nuxt />
</template>

specify it in your page with:

<script>
export default {
  layout: "empty"
};
</script>

Answer 2

You have two options:

1- You can modify the layout/default.vue to adapt it to your preferences.

2- You can create a custom layout for your page.

Depends of your intentions. Keep in mind that layouts/default.vue file it will be used for all pages that don't have a layout specified. Therefore is better if you keep that layout for the most common type of page in your website.

For the rest of the pages you are planning to add to your site you can use a custom layout. You will need to create each one in the layouts folder of your project.

Here you will find a detailed explanation with examples: https://nuxtjs.org/guide/views#layouts

Good luck in your project. Don't give up!

Answer 3

Few points to make things clear

1. All pages will be loaded with layout default.vue
2. If you have specified a layout for the page then it will be loaded with the specified layout.
3. If the specified layout is not available then the page will be loaded with default.vue
4. If nuxt don't see a file named default.vue in the layouts folder then the page will be loaded on a empty layout
5. There is nothing like layout: "empty"

// error.vue
<script>
export default {
  layout: "empty"
};
</script>

In the above snip, when you specify layout as "empty" it doesn't mean that the page will be loaded without any layout. Nop!... Instead, nuxt will look for the file named empty.vue inside layout folder and if it is not available then the page will fallback to the layout of default.vue.