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

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

新規登録して質問してみよう
ただいま回答率
85.36%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

898閲覧

NuxtでBootstrapを使う

Koock

総合スコア32

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/11/11 00:43

引用テキスト### 前提・実現したいこと

Windows10でnuxtを使ってWebサイトを作っています。
オプションで「UI framework: Vuetify.js」などを指定すると
ルートには「layouts」フォルダーが出来ます。
ところが「UI framework: Bootstrap Vue」をしていすると
「layouts」フォルダーが出来ません。
「.nuxt」のなかに「layouts」フォルダーが出来ます。

発生している問題・エラーメッセージ

「.nuxt\layouts\」を修正すると思った通りになります。
ところが何かやると元に戻ってしまいます。「何か」を調べたら、どうも別のファイルを修正すると「元に戻って」しまうようです。
ルートに作られる「layouts\default.vue」は元に戻ることはありません。
「UI framework: Bootstrap Vue」を使って「layouts\default.vue」がルートに作られるようにするには、どうすればよいですか。ご存じの方、ご教授をお願いします。

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

nodeバージョン
v14.16.0
nuxt実行方法
npx create-nuxt-app nuxt-blog3

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.nuxtに入っているものは、ユーザーがlayoutsフォルダを自作していない場合、
ビルド時に代替として生成されるデフォルトファイルのようで、これはユーザーが編集するものではないと思います。

create-nuxt-app/index.test.js.md at master · nuxt/create-nuxt-app

こちらを見るとVutify.jsといくつかのUIフレームワークを除いてはlayoutsフォルダは自動で生成されない仕様のようです。
(専用デモページが用意されてるものだけ?)

以前はlayoutsフォルダに必須ではないので消しても構わないというREADME記述があったものの、それでも自動的に生成されていたはずですが、
現在は完全にオプション扱いで自分で作成する必要があるものになったものと思われます。
(どの時点で変更があったかはわかりません)

投稿2021/11/11 07:38

surface_0

総合スコア497

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Koock

2021/11/11 08:33

回答、ありがとうございます。「layoutsフォルダは自動で生成されない仕様」とのこと、了解しました。 もし、ご存知でしたら、手動でlayoutsフォルダを作る方法はあるのでしょうか。試しに、「.nuxt\layouts」を消して(実際はrename)みたらERRORになりました。消すとダメのようです。何か回避策を知っていますか。よろしくお願いいたします。
surface_0

2021/11/11 09:08

.nuxt/layoutsは手動で弄ってはいけないものなのでそのままにしておき、 自分でプロジェクトルート直下にlayouts/default.vueを作ってビルドしたところ .nuxt/layoutsは勝手に消滅しました。
Koock

2021/11/12 00:02

同じことをやってみました。その通りになりませた。ありがとうございました。1つ、問題が解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問