Nuxt.jsで外部のjs,cssファイルを読み込む方法

Nuxt.jsで外部のjs,cssファイルを読み込む方法になります。

共通で読み込む場合

共通で外部ファイルを読み込む場合は、nuxt.config.jsで設定します。

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: 'https://demo.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto'
      }
    ]
  }
}

ページ毎に読み込む場合

ページごとに外部ファイルを読み込む場合は、pagesディレクトリのvueファイルで設定します。

page.vue

<script>
export default {
  head() {
    return {
      script: [
        {
          src: 'https://demo.js'
        }
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css?family=Roboto'
        }
      ]
    }
  }
}
</script>