How to use external resources?

Global Settings

You can include your external resources in the head object or function. As described in the head API docs, the following examples shows the use of head as an object and as a function. If you want to use values from your Vue component like computed properties or data, you can use the head() function, returning the final head object.

Include your resources in nuxt.config.js (here in the head object):

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' }
    ]
  }
}

Local Settings

Include your resources in your .vue file inside the pages/ directory (here in the head fuction):

<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>

Contributors

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!

Platinum Sponsors

Storyblok
Support Us