ウィンドウやドキュメントがNuxtで定義されていない問題のまとめ

このタイプの質問には、一般的に次の2つのシナリオがあります。

• サードパーティ製コンポーネントを参照する場合 を参照する場合など vue-awesome-swiper このようにサードパーティコンポーネントを参照する場合、ソースコンポーネントのコードにアクションが含まれているため window オブジェクトを使用するため、このタイプの window is not defined これは、公式の方法に従って、プラグインを使用して導入することで解決できます。

// Here's an example of the vue-awesome-swiper component
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

export default () => {
	Vue.use(VueAwesomeSwiper)
}
// Then add the following code to the css and plugins in the nuxt.config.js file
css: [
	...
    { src: 'swiper/dist/css/swiper.css' },
	...
],
plugins: [
	...	
  	{ src: '~/plugins/vue-awesome-swiper', ssr: false }
  	...
],
// This would be like introducing the component globally, and you could use it directly in your .vue file
// <div class="swiper-wrapper"></div> this style to use this component

• で手書き window オブジェクト . この種のものは、公式のメソッドに従います

if (process.client) {
 require('external_library') // Here is the code to manipulate the window object
}
// Pro-tested perfect solution????