質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.80%

Nuxt.jsのlayoutsに制限をかけたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,038

score 16

前提・実現したいこと

現在、Nuxtjs+Vuetifyを使ってwebアプリを開発しています。

そこで、UIを統一するためにNuxt.jsのlayoutsディレクトリを使用しているのですが、
1ページだけ、layoutsディレクトリに指定したUiを指定せずに描画されるようにしたいです。

発生している問題

layouts/default.vue を、あるページだけ表示されないようにしたい。

該当のソースコード

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
      clipped
    >
      <v-list dense>
        <v-list-item
          v-for="item in items"
          :key="item.text"
          link
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>
              {{ item.text }}
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-subheader class="mt-4 grey--text text--darken-1">
          SUBSCRIPTIONS
        </v-subheader>
        <v-list>
          <v-list-item
            v-for="item in items2"
            :key="item.text"
            link
          >
            <v-list-item-avatar>
              <img
                :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`"
                alt=""
              >
            </v-list-item-avatar>
            <v-list-item-title v-text="item.text" />
          </v-list-item>
        </v-list>
        <v-list-item
          class="mt-4"
          link
        >
          <v-list-item-action>
            <v-icon color="grey darken-1">
              mdi-plus-circle-outline
            </v-icon>
          </v-list-item-action>
          <v-list-item-title class="grey--text text--darken-1">
            Browse Channels
          </v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon color="grey darken-1">
              mdi-settings
            </v-icon>
          </v-list-item-action>
          <v-list-item-title class="grey--text text--darken-1">
            Manage Subscriptions
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      app
      clipped-left
      color="rgba(255, 204, 0, 1)"
      dense
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title class="mr-12 align-center">
        <span class="title">Google contacts</span>
      </v-toolbar-title>
      <v-spacer />
      <v-row
        align="center"
        style="max-width: 650px"
      >
        <v-text-field
          :append-icon-cb="() => {}"
          placeholder="Search..."
          single-line
          append-icon="search"
          color="#1A237E"
          hide-details
        />
      </v-row>
    </v-app-bar>

    <v-content>
      <v-container class="fill-height">
        <v-row
          justify="center"
          align="center"
        />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line
    source: String
  },
  data: () => ({
    drawer: null,
    items: [
      { icon: 'mdi-trending-up', text: 'Most Popular' },
      { icon: 'mdi-youtube-subscription', text: 'Subscriptions' },
      { icon: 'mdi-history', text: 'History' },
      { icon: 'mdi-playlist-check', text: 'Playlists' },
      { icon: 'mdi-clock', text: 'Watch Later' }
    ],
    items2: [
      { picture: 28, text: 'Joseph' },
      { picture: 38, text: 'Apple' },
      { picture: 48, text: 'Xbox Ahoy' },
      { picture: 58, text: 'Nokia' },
      { picture: 78, text: 'MKBHD' }
    ]
  }),
  created () {
    this.$vuetify.theme.dark = false
  }
}
</script>

<style>
.title {
  color: #1A237E;
}
</style>
<template>
  <div>
    <TheHeader />
    <div class="wrapper">
      <nuxt class="container" />
    </div>
  </div>
</template>

<script>
import TheHeader from '~/components/TheHeader.vue'

export default {
  components: {
    TheHeader
  }
}
</script>

❗️このファイルだけ表示されたくない❗️

<template>
  <v-app id="inspire">
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <!-- cols="columns" -->
          <v-col
            cols="12"
            xl="14"
            md="8"
          >
            <v-card class="elevation-12">
              <v-toolbar
                color="primary"
                dark
                flat
              >
                <v-toolbar-title>Login form</v-toolbar-title>
                <v-spacer />
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                    label="Login"
                    name="login"
                    prepend-icon="person"
                    type="text"
                  />

                  <v-text-field
                    id="password"
                    label="Password"
                    name="password"
                    prepend-icon="lock"
                    type="password"
                  />
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer />
                <v-btn color="primary">
                  Login
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line
    source: String
  }
}
</script>

試したこと

nuxt.jsのlayoutsがとても便利
Nuxt.js公式ドキュメント

上記の記事を参考に、pagesディレクトリに存在するファイルのscriptタグ内に
layout: "" または、layout: false を追記したが、解決しませんでした。

補足情報(FW/ツールのバージョンなど)

{
  "name": "",
  "version": "1.0.0",
  "description": "My epic Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.9.3",
    "analyze": "^0.0.14",
    "chart.js": "^2.9.3",
    "config": "^3.2.5",
    "cryptiles": "^4.1.3",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-vue": "^6.1.2",
    "eslint-scope": "^5.0.0",
    "firebase": "^7.7.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "hoek": "^6.1.3",
    "latest": "^0.2.0",
    "material-design-icons-iconfont": "^5.0.1",
    "nuxt": "^2.11.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "tunnel-agent": "^0.6.0",
    "underscore.string": "^3.3.5",
    "vue-chartjs": "^3.5.0",
    "webpack": "^4.41.5",
    "yarn": "^1.21.1"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/vuetify": "^1.10.2",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-plugin-nuxt": ">=0.5.0"
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

解決方法

カスタムレイアウトを使ってトップページだけヘッダーを表示しないようにする

こちらの記事を参考に、layoutsディレクトリにちがうヘッダーを適当に作成し、
layout: 'sample'と指定したところ無事解決いたしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る