解決したいこと
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にデプロイ予定です。
あなたの回答
tips
プレビュー