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

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

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

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

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

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

Q&A

0回答

210閲覧

nuxtjs/ssrでbuildからstartした際にプラグインが動作しないのを解決したい

airi11

総合スコア1

Vue.js

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

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

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

0グッド

0クリップ

投稿2021/09/11 03:09

解決したいこと

nuxt.js/ssr のアプリケーションを 'npm run start'した時に
ページは表示されるがpluginが動作しないのを解決したい。

外部ライブラリ(vue-scrollmagic)を実装したいです。
'npm run dev'の際には正常に動作しますが、'npm run start'の際には動作しません。
特にエラーなどはありませんが、おそらくssr時には'config'や'plugins/○○.js'に下記とは別のコードを記載するのかと考えています。

該当するソースコード

.vueファイルに記載した'mounted()'がssr使用時には動作しないのかと考えましたが、解決方法がわかりませんでした。

sample.vue

1<script> 2export default{ 3 mounted() { 4 const scene1 = this.$scrollmagic 5 .scene({ 6 triggerElement: "#sec04-text-trigger", 7 triggerHook: 0.65, 8 }) 9 .setTween("#sec04-text-trigger", { 10 css: { 11 opacity: "1", 12 transition: "ease-in", 13 }, 14 }); 15 this.$scrollmagic.addScene(scene1); 16 }, 17}; 18</script>

plugin/vue

1import Vue from 'vue' 2import VueScrollmagic from 'vue-scrollmagic' 3Vue.use(VueScrollmagic)

"mode:'client'"を'server'に変更した際には'npm run dev'と'npm run start'ともにエラーがでましたが、これは予想通りなので関係ないと考えました。

nuxt.config.js

1 plugins: [ 2 { 3 src: '~/plugins/vue-scrollmagic.js', 4 mode: 'client', 5 } 6 ], 7 buildModules: [ 8 // https://go.nuxtjs.dev/eslint 9 '@nuxtjs/eslint-module' 10 ], 11 modules: [ 12 // https://go.nuxtjs.dev/axios 13 '@nuxtjs/axios', 14 // https://go.nuxtjs.dev/pwa 15 '@nuxtjs/pwa', 16 ], 17

pacage.json

1 "scripts": { 2 "dev": "nuxt", 3 "build": "nuxt build", 4 "start": "nuxt start", 5 "generate": "nuxt generate", 6 "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .", 7 "lint": "npm run lint:js" 8 },

エラーがなく、ページ自体は表示されてpluginだけが動作しないので、正常にclient側でpluginが読み込まれていないのかと予想しています。

追加情報ですが、最終的にはvercelにデプロイ予定です。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問