Nuxt.js: Using external resources with Nuxt

[husayt]

Hi I have been reviewing nuxt.js and so far am very impressed.

I have tried to implement a simple project. But had certain issues and was wondering if that is possible here or not.

To start with how can i refer to external resources, be it js file or css.

let's say I want to use bootstrap. How could I import boostrap's css and js? if this is possible, i would appreciate if it would be possible to share both approaches:

1) locally (from static folder)
2) externally directly from cdn, without including the files in the project

Thanks in advance

That am sure will be very useful to many others

_{This question is available on Nuxt.js community (#c88)}

[mixty1]

@husayt, You can set external script or css like this:

// nuxt.config.js
````
module.exports = {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
],
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' }
]
}
}

[husayt]

Thank you very much. This was really useful. But what if I want to load these for only specific pages?

[Atinux]

Hi @husayt

Thank you @mixty1 for your answer, it's the perfect answer for the 2) asked by @husayt

If you want to load it only for a specific page, you can add the head property in your page file:
pages/about.vue:

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

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

[cschweda]

Is there a webpack.config.js somewhere that's editable?

I'd like to use the webpack-expose-loader, for example, to expose Tether and jQuery. I can used Vue's mounted function to do this via window.Tether, I know -- but I'd like to have a way to edit the webpack config where necessary.

[Atinux]

You can extend the webpack configuration trough nuxt.config.js with the build.extend method. The doc about these configurations is coming this week!

You can take a look at the examples/custom-build/ folder to see how it works.

[cschweda]

Aha! Wow -- this looks great. Thanks. This should do the trick!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.