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. You can also pass each resource an optional body: true to include the resource before the closing </body> tag.

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

  1. export default {
  2.   head: {
  3.     script: [
  4.       { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
  5.     ],
  6.     link: [
  7.       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
  8.     ]
  9.   }
  10. }

Local Settings

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

  1. <template>
  2.   <h1>About page with jQuery and Roboto font</h1>
  3. </template>
  5. <script>
  6. export default {
  7.   head () {
  8.     return {
  9.       script: [
  10.         { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
  11.       ],
  12.       link: [
  13.         { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
  14.       ]
  15.     }
  16.   }
  17. }
  18. </script>
  20. <style scoped>
  21. h1 {
  22.   font-family: Roboto, sans-serif;
  23. }
  24. </style>