[Nuxt] 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
.
Install:
npm i --save tachyons
nuxt.config.js:
module.exports = { /* ** Headers of the page */ head: { title: 'starter', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /** * Global CSS */ css: ['tachyons/css/tachyons.css'], /* ** Customize the progress-bar color */ loading: { color: '#3B8070' }, /* ** Build configuration */ build: { /* ** Run ESLINT on save */ extend (config, ctx) { if (ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } } }