Yumma CSS and Nuxt.js
How to add Yumma CSS to your project with Nuxt.js.
-
Install Yumma CSS:
Install the Yumma CSS Library using a package manager.
Installing dependencies... npm i yummacss@latest -
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"; -
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"],}); -
Start development server
Start your application using
npm run dev
.Terminal npm run dev -
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>
Project example
If you’re having trouble with Yumma CSS, clone this Nuxt.js example.
-
Cloning repository
Cloning repository... git clone https://github.com/yumma-lib/nuxtjs-yummacss-example.git -
Installing dependencies
Installing dependencies... npm install -
Start development server
Terminal npm run dev