Want to take a look at our new docs? Our new docs are now in beta. Have fun!

外部リソースを使うには?

グローバルな設定

head オブジェクトもしくは関数の中に、外部のリソースを含めることができます。 head API docs で説明されているように、次の例では head をオブジェクトと関数として使用します。 computed プロパティもしくは data プロパティのような Vue コンポーネントから値を使用したい場合、head() メソッドを使用して、最終的な head オブジェクトを返すこともできます。各リソースはオプションの body: true を渡すと、</body> の終了タグの前にリソースを含めることもできます。

nuxt.config.js 内でリソースをインクルードします(この例では head オブジェクト):

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

ローカルな設定

pages/ ディレクトリの .vue ファイル内でリソースをインクルードします(この例では head メソッド):

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>
Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us