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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1759閲覧

【laradock】を使って【Nuxt.js】を導入した際にpagesのtemplate内コードだけ認識されない

kotaro_nagano

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/04/15 12:42

編集2019/04/15 12:54

現在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.jsonnuxt側の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>&copy; {{ new Date().getFullYear() }}</div> </v-footer> </template> <script> export default {}; </script>

追記

認識されていないのですが、エラーは出ていません。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問