CSS

After installing nuxt-uikit3 you can use it in any page or component without any configuration

page/component.vue

<template>
  <section class="uk-section uk-section-default">
    <div class="uk-container">
      <h1 class="uk-heading-medium">Are You Nuxt!</h1>
      <button type="button" class="uk-button uk-button-primary">
        Click me!
      </button>
    </div>
  </section>
</template>

CSS Options

By default the module loads UIkit core && theme stylesheets.

Option	Type	Default	Description
`coreCss?`	boolean	true	Enable/Disable the module from loading UIkit core css
`coreTheme?`	boolean	true	Enable/Disable the module from loading UIkit default theme css
`build?`	object	undefined	scss/less build build options

Scss/Less options

You need to install your css preprocessor dependencies. ex: pnpm i -D sass sass-loader Also check Scss custom build in the examples.

Option	Type	Default	Description
`preprocessor`	'scss' or 'less'	undefined	What css preprocessor to use
`stylesPath`	string	undefined	Path to your site.scss/less ex: `~/assets/scss/site.scss`
`variablesPath`	string	undefined	Path to variables.scss/less to make it available in all pages/components
`mixinsPath`	string	undefined	Path to mixins.scss/less to make it available in all pages/components

variablesPath and mixinsPath are used only to share them in your app. You should also include them in your global styles to be compiled and take effect. Please check UIkit scss or less docs.

Example of global scss from UIkit docs:

~/assets/styles/stie.scss


// 1. Your custom variables and variable overwrites.
@import "variables/accordion.scss";
@import "variables/alert.scss";
@import "variables/align.scss";
// … import all

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";

// 3. Your custom mixin overwrites.
@import "mixins/accordion-mixins.scss";
@import "mixins/alert-mixins.scss";
@import "mixins/align-mixins.scss";
// … import all

// 4. Import UIkit
@import "uikit/src/scss/uikit.scss";

UsageDevtools

UsageJavascript