CODEWITHSUNDEEP
vue.jsnuxt.js
Hellden
Hellden

Reputation: 153

How disable default layout on other page

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'

Upvotes: 12

Views: 23135

Answers (6)

AwadhJY
AwadhJY

Reputation: 31

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>

Upvotes: 2

mlvrkhn
mlvrkhn

Reputation: 95

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.

Upvotes: 0

Anees Hameed
Anees Hameed

Reputation: 6554

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.

Upvotes: 2

ccleve
ccleve

Reputation: 15799

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>

Upvotes: 19

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

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.

Upvotes: 0

AleDP
AleDP

Reputation: 536

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!

Upvotes: 12

Related Questions