Add Yumma CSS in Nuxt.js

1. Install Yumma CSS:

   Install the Yumma CSS Library using a package manager.

   Installing dependencies...

   npm i yummacss@latest

2. Add yummacss to your main CSS file:

   Create a new assets/global.css file.

   assets/global.css

   /* Minified Version */
   @import "/node_modules/yummacss/dist/yumma.min.css";

3. Import the CSS file

   Add the new CSS file to nuxt.config.ts.

   nuxt.config.ts

   export default defineNuxtConfig({
       compatibilityDate: "2024-04-03",
       devtools: { enabled: true },
       css: ["/assets/global.css"],
   });

4. Getting ready for development:

   Start your application using npm run dev.

   Terminal

   npm run dev

5. Use Yumma CSS in your project:

   You’re all set to start using Yumma CSS utility classes in your project.

   app.vue

   <template>
       <div class="h-1/1 ins">
           <h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Nuxt.js</h1>
       </div>
   </template>

---

Still stuck?

If you’re having trouble with Yumma CSS, clone this Nuxt.js example.

Cloning repository...

git clone https://github.com/yumma-lib/nuxtjs-yummacss-example.git