how to import external js and css on my code nuxtjs

Question

I starting a project in Nuxt.JS but already have my site in HTML + CSS + JS. I need just include these HTML on design of NuxtJS.

I have already tried to put the css as a global scope inside nuxt.config.js however in that way it will compile in SSR, and I would not like it. Just like import on html the css, js...

How could I import CSS and Javascript into my pages?

Thanks

Ejdrien · Accepted Answer · 2018-12-26 10:48:00Z

6

All you have to do is to include a head method in your page's export default.
You can learn more about the head method here

<script>
export default {
  head () {
    return {
      script: [
        { src: 'path/to/your/js/file.js' }
      ],
      link: [
        { rel: 'stylesheet', href: 'path/to/your/css/file.css' }
      ]
    }
  }
}
</script>

OR

You can include them as if you'd do in html with style tag

<style src="path/to/your/css/file.css"><style>
<!-- You can also add "scoped" or "lang='sass'" etc in there -->

edited Dec 26, 2018 at 10:48

answered Dec 21, 2018 at 7:40

Ejdrien

2,8901 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Kim Over a year ago

FYI: if it's dynamic page, like _id, if you would navigate from page with ID 1 to page with ID 2, your external script won't load, you have to refresh a browser or re-render your page component.

Chalist Over a year ago

@Ejdrien Can I use conditions for import CSS in link section?

Collectives™ on Stack Overflow

how to import external js and css on my code nuxtjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related