Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Add CSS Libraries to Nuxt

    John LindquistJohn Lindquist

    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.

    vueVue.js
    tachyonsTachyons
    nuxtNuxt.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss