UPDATE!

See Installing nuxt-uikit module in a nuxt application for our new nuxt-uikit module for easy installation!

Like most developers I really LOVE VueJS/NuxtJS! and I also really like the UIkit front-end framework. However, while there is a setup guide present for UIkit with NuxtJS I realized that whenever the page loads/reloads the icons would disappear for a couple seconds while the rest of the content is still present (This is probably because the icons need JavaScript to work and JS only works client side). Base on the application you are building you may not want that.

This tutorial/template was created to fix this issue. This is not a perfect solution but it works!

Instructions

1. Create the Nuxt app.

yarn create nuxt-app nuxt-uikit

2. Change directory to project folder.

cd nuxt-uikit

3. Install UIkit.

yarn add uikit

4. Create a js & uikit folder in the static directory.

mkdir -p static/js/uikit

5. Add uikit-update script to update UIkit and copy over uikit.min.js & uikit-icons.min.js from node_modules to static directory. Your package.json file should look like the following:

{
  "name": "nuxt-uikit",
  "dependencies": {
    "nuxt": "^2.15.8",
    "uikit": "^3.14.1"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "uikit-update": "yarn add uikit && cp node_modules/uikit/dist/js/uikit.min.js ./static/js/uikit/ && cp node_modules/uikit/dist/js/uikit-icons.min.js ./static/js/uikit/"
  }
}

6. Configure the nuxt.config.js file to read uikit.min.js & uikit-icons.min.js from the head as a script. Your nuxt.config.js file should look like the following:

export default {
  head: {
    titleTemplate: "nuxt-uikit",
    title: "Configuring nuxtjs for better uikit support",
    htmlAttrs: {
      lang: "en",
      amp: true,
    },
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.png" },
    ],
    script: [
      { src: "/js/uikit/uikit.min.js" },
      { src: "/js/uikit/uikit-icons.min.js" },
    ],
  },
  css: ['uikit/dist/css/uikit.css']
}

7. Start dev server.

yarn dev

Update UIkit To Latest

yarn uikit-update

Install & Use This Template

git clone https://github.com/edu-fedorae/nuxt-uikit.git
cd nuxt-uikit
yarn install
yarn dev