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'

Cowbird

i don't think you make nuxt page without layout. You can create empty layout as default and make named layout for manual. Or simple create layout with name 'none' and setup him in new pages. – Idaliaidalina

Answer 1

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!

Postnatal

Nuxt seems to be overriding the child routes layout. In my case I have the default and no-footer layouts. The /checkout has no layout but it's overriding the value set in /checkout/something – Riana

Answer 2

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>

Pyrolysis

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.

Pinsk

Answer 4

if you want no layout in specific page use this one

<script setup>
definePageMeta({
  layout: false,
});
</script>

or any other layout in side the layouts folder

<script setup>
definePageMeta({
  layout: "custom_layout",
});
</script>

*note:

This will work in both <script setup> and <script>

Conveyance

Answer 5

You can modify the default layout to fit your purpose

or

you can make any custom layout in Nuxt.

then just change your layout like below

layout: 'custom_layout'

you can see sample from here.

Eugenle

Answer 6

another way of doing it is to add this line to nuxt.config.js so that if you do not provide layout, it falls back to empty.vue:

 layouts: {
    default: '~/layouts/empty.vue',
  },

then create empty.vue as per above and only use layouts that you need in the components you want.

Kampmeier