Add Uikit 2 module

[miladmeidanshahi]

Hi, please add uikit 2 framework in nuxt.

_{This question is available on Nuxt.js community (#c89)}

[asifm]

For anyone looking to integrate uikit into nuxt

uikit 3 is almost out. Here's how to get it to work with nuxt.js.

In command line: yarn add uikit

Create new file uikit.js in the plugins folder. Insert this code:

// plugins/uikit.js
import Uikit from "uikit/dist/js/uikit";
import Icons from 'uikit/dist/js/uikit-icons'

Uikit.use(Icons)

Then add the plugin in nuxt.config.js:

// nuxt.config.js
plugins: [
  './plugins/uikit.js'
],

You can import the css in multiple ways. I customize the default theme. So I have a custom.scss in assets folder. (If you don't have sass installed locally then yarn add node-sass sass-loader. You can also use less — follow the official uikit doc on custom themes.)

// assets/custom.scss
// 1. Custom variables and variable overwrites.
$global-link-color: #DA7D02;

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

// 3. Custom mixin overwrites.
@mixin hook-card() { color: #000; }

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

Then add the custom.scss in nuxt.config.js:

css: [
  '@/assets/custom.scss'
],

You should be all set.

Bonus: On vscode, this extension is very useful: https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets

[caravanpetrol]

works great. On a build process (nuxt generate) I've not found a solution to compile Uikit3 custom icons. Do u have an idea ?