⚠️ This lesson is retired and might contain outdated information.

Add CSS Libraries to Nuxt

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 months ago

You can easily add CSS libraries to Nuxt using yarn or npm to install them, then simply adding them to the nuxt.config.js so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your nuxt.config.js.

[00:00] I'm going to add the Tachyons library to my project with yarn add tachyons. You'll see it installing down here in the terminal. Then you'll see, once that's done, it's down here in the node_modules/tachyons. Tachyons has a CSS directory with a tachyon-css in it.

[00:18] Now, what I'm going to do is hop into my config file, my next.config file. Now down in my Global CSS settings, I'm going to add a comma after this CSS file, and tell it to bring in tachyons-css, tachyons.css.

[00:37] What's the name of the module in the node modules library and the path to the file that I want to include? I'll go ahead and save that. Back in my index view file, I can go ahead and start adding the classes and styles that I want to include, like classes padding vertical 4.

[00:54] Save and you'll see I now have this padding on top. If I inspect it, you'll also see the padding on the bottom as well. This PV4 class, that's the padding on the top and the padding on the bottom. A PA4 would add padding all around it, two rims on top, right, bottom, left as defined in the PA4 class.

[01:12] To add any CSS library to project, whether it's a bootstrap or foundation, yarn install them. Reference them by this path here, which is defined in your config in CSS, and then those classes are available in the template.

~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today