Add CSS Libraries to Nuxt
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.