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

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

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

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

Nuxt.js

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

JavaScript

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

受付中

Nuxt.jsで共通のJavascriptの処理を個別のJavascriptでも使えるようにしたい

s0h5511
s0h5511

総合スコア4

Vue.js

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

Nuxt.js

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

JavaScript

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

1回答

0リアクション

1クリップ

216閲覧

投稿2022/09/15 04:10

編集2022/09/15 04:15

Nuxt.jsで静的なサイトを作っています。
トップページでは初回表示の際にモーダルを表示します。
表示する際に、共通のjsに記載の背景固定の処理を実行したいのですが、
その際に以下のエラーメッセージが発生しました。

エラーメッセージ

Uncaught ReferenceError: common is not defined

実現したいこと

app.js内のcommonの処理が
個別のjsでも使えるようにしたいです。

該当のソースコード

nuxt.config.js

js

export default { srcDir: 'src/', mode: 'universal', /* ** Plugins to load before mounting the App */ plugins: [ { src: '~/plugins/magnific.min.js', mode: 'client' } ], /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { config.externals = { jquery: 'jQuery' }; }, }, }

index.vue

js

<script> import App from '~/assets/js/app'; import PageScript from '~/assets/js/pages/top/script'; export default { head() { return { bodyAttrs: { 'data-page': 'top' }, script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', defer: true, onload: this.onJqueryLoad() }, ] } }, methods: { onJqueryLoad() { this.$nextTick(() => { if (process.browser) { App() PageScript() } }) } } } </script>

app.js(共通のJS)

js

export default function () { "use strict"; let common = {}; common.event = {}; let sc; common = { // ---------------------------------------- // 背景固定 // ---------------------------------------- fixed : { init: function init() { this.__Flag_open = false; }, open: function open() { const _this = this; _this.__Flag_open = true; sc = $(window).scrollTop(); $('html').css({ minHeight: '100vh', }); $('body').css({ width: '100%', height: 'auto', position: 'fixed', top: -sc, }); $('html').attr('data-fixed', 'true'); }, close: function close() { const _this = this; _this.__Flag_open = false; $('html').css({ minHeight: '' }); $('body').css({ width: '', height: '', position: '', top: '', paddingRight: '' }); $('html, body').prop({ scrollTop: sc }); $('html').attr('data-fixed', 'false'); } }, // ---------------------------------------- // スクロールバーの出現によるガタつきを防ぐ // ---------------------------------------- scrollBarhide : { init: function init() { const body = document.getElementsByTagName('body')[0]; const scrollBarwidth = window.innerWidth - document.body.clientWidth; body.style.paddingRight = scrollBarwidth + 'px'; } }, } }

script.js(個別のJS)

js

export default function () { 'use strict'; let PagesTop = {}; PagesTop.event = {}; $(function() { PagesTop.firstModal.init(); }); PagesTop = { firstModal: { init: function init() { $.magnificPopup.open({ items: {src: '#modal-first'}, type: 'inline', mainClass: 'mfp-fade', closeMarkup: '<button class="c-modal__close-button js-modal-close" type="button"><span class="c-modal__close-button-inner"><span class="c-modal__close-button-bars"><span class="c-modal__close-button-bar"></span><span class="c-modal__close-button-bar"></span></span></span></button>', callbacks: { open: function() { $("html").attr("data-modal", "true"); $('.mfp-wrap').css({ position: 'fixed', top: 0 }); $('.js-modal-close').on('click', function (e) { e.preventDefault(); $.magnificPopup.close(); }); if (!common.fixed.__Flag_open) { common.scrollBarhide.init(); common.fixed.open(); } }, close: function() { $("html").attr("data-modal", "false"); $('.mfp-wrap').attr({ style: '' }); if (common.fixed.__Flag_open) { common.fixed.close(); } }, } }); }, }, } }

大変お手数ではございますがご教示頂ければ幸いと存じます。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Nuxt.js

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

JavaScript

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