現在laradock
を使いNuxt.js
(以下nuxt
統一)を導入したのですが、nuxt
ファイル配下のpages
内で作ったファイルのtemplate
タグ内のコードのみが認識されません。
layout
を記述するとlayout
内コードのみ認識され表示されます。
参考にしたサイト
https://qiita.com/aoarashi/items/535feeca48d15516d450
# ファイル内コード
docker
でコンテナを立てたりなどのやり方は省略します。(そこに問題がありそうであれば指摘お願いします)
Laravel導入も省きます
.env内(一部抜粋) #変更前 # APP_CODE_PATH_HOST=../ #変更後 APP_CODE_PATH_HOST=../src #変更前 #DATA_PATH_HOST=~/.laradock/data #変更後 DATA_PATH_HOST=.laradock/data
ターミナルでnuxt作成 $ yarn create nuxt-app nuxtProject
Laravel
側のpackage.json
をnuxt
側のpackage.json
と入れ替え
$ rm package.json # laravelインストール時に生成された方を削除 $ mv ./nuxtProject/package.json package.json #nuxtの方と入れ替える
nuxt.config.jsも移動
$ mv ./nuxtProject/nuxt.config.js nuxt.config.js
中身を編集。
module.exports = { ~ 省略 ~ build: { ~ 省略 ~ }, srcDir: './nuxtProject', <- nuxt プロジェクトディレクトリパス watchers: { <- nuxt コマンドでホットリロードを有効にするため webpack: { poll: true } } }
nuxt 立ち上げ
package.json
内編集
{ "name": "nuxtProject", ~ 省略 ~ "scripts": { "dev": "nuxt", <- 変更前 "dev": "HOST=0.0.0.0 PORT=3000 node_modules/nuxt/bin/nuxt.js", <- 変更後 "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, ~ 省略 ~ }
// アップデート $ yarn // サーバー立ち上げ $ yarn dev yarn run v1.15.2 $ HOST=0.0.0.0 PORT=3000 node_modules/nuxt/bin/nuxt.js ╭──────────────────────────────────────────╮ │ │ │ Nuxt.js v2.5.1 │ │ Running in development mode (spa) │ │ Memory usage: 28.8 MB (RSS: 86.6 MB) │ │ │ │ Listening on: http://172.20.0.2:3000 │ │ │ ╰──────────────────────────────────────────╯ ℹ Preparing project for development 12:09:07 ℹ Initial build may take a while 12:09:07 ✔ Builder initialized 12:09:07 ✔ Nuxt files generated 12:09:07 ✔ Client Compiled successfully in 19.78s ℹ Waiting for file changes
起動成功
http://localhost:3000
上記にアクセスするが表示がすこしおかしい
とりあえずログインページを作る
// laravel/nuxtProject/pages/login/index.vue <template> <v-conteiner> <Header/> <v-content> <v-container> <nuxt/> </v-container> </v-content> <Footer/> </v-conteiner> </template> <script> export default { components: { Footer: () => import("@/components/common/footer"), Header: () => import("@/components/common/header") }, }; </script>
※コンポーネント内記述は下で書いています
何も映らず。
####次にLayoutに同じ記述をしてpagesにlayout追加
// laravel/nuxtProject/layouts/login.vue <template> <v-conteiner> <Header/> <v-content> <v-container> <nuxt/> </v-container> </v-content> <Footer/> </v-conteiner> </template> <script> export default { components: { Footer: () => import("@/components/common/footer"), Header: () => import("@/components/common/header") }, }; </script>
// laravel/nuxtProject/pages/login/index.vue <template> </template> <script> export default { layout: "login", }; </script>
上記方法で確認してみるとしっかりとコンポーネントが表示されました。
コンポーネント以外にも<h1>タグなども使用しましたが何も表示されませんでした。
ヘッダーフッターコード
ヘッダー // @/components/common/header <template> <v-toolbar color="#52A1DD"> <v-toolbar-title>title</v-toolbar-title> <v-spacer></v-spacer> <v-toolbar-items class="hidden-sm-and-down"> <v-btn flat id="header-button">Link One</v-btn> <v-btn flat id="header-button">Link Two</v-btn> <v-btn flat id="header-button">Link Three</v-btn> </v-toolbar-items> <v-main></v-main> </v-toolbar> </template> <script> export default {}; </script>
フッター // @/components/common/footer <template> <v-footer class="pa-3"> <v-spacer></v-spacer> <div>© {{ new Date().getFullYear() }}</div> </v-footer> </template> <script> export default {}; </script>
追記
認識されていないのですが、エラーは出ていません。
あなたの回答
tips
プレビュー