Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS v3.0 is finally live 🎉

Yumma CSS and Nuxt.js

Setup Yumma CSS with Nuxt js.

Creating a new project

To create a new Nuxt.js project, you need run the Nuxt.js command in your terminal.

  1. Install Yumma CSS

    Install the Yumma CSS Library using a package manager.

    Installing dependencies...
    npm i yummacss

  2. Include yummacss in your main CSS file:

    In this case, we’re importing the minified version of Yumma CSS.

    Create a new assets/global.css file.

    assets/global.css
    @import "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. Start development server

    Start your application using npm run dev.

    Starting development server...
    npm run dev

  5. Done!

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

    app.vue
    <template>
        <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Nuxt.js</h1>
    </template>

Clone this project

You can clone the project from the GitHub repository.

Cloning the project...
git clone https://github.com/yumma-lib/nuxtjs-example.git