Add UIkit example

examples/uikit/README.md

@@ -0,0 +1,5 @@
+# UIKit with Nuxt.js
+
+UIkit: https://github.com/uikit/uikit
+
+https://nuxtjs.org/examples

examples/uikit/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="uk-container">
+    <nuxt/>
+  </div>
+</template>

examples/uikit/nuxt.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  css: ['uikit/dist/css/uikit.css'],
+  plugins: [
+    { src: '~/plugins/uikit.js', ssr: false }
+  ]
+}

examples/uikit/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "uikit-nuxt",
+  "dependencies": {
+    "nuxt": "latest",
+    "uikit": "^3.0.0-beta.30",
+    "jquery": "^3.2.1"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/uikit/pages/about.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="uk-card uk-card-body">
+    <p>Hi from {{ name }}</p>
+    <span class="uk-margin-small-right" uk-icon="icon: check"></span>
+    <a href="#" uk-icon="icon: heart"></a>
+    <hr class="uk-divider-icon">
+    <nuxt-link to="/">Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ req }) {
+    return {
+      name: req ? 'server' : 'client'
+    }
+  }
+}
+</script>

examples/uikit/pages/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="uk-card uk-card-body uk-card-primary">
+    <h3 class="uk-card-title">Nuxt.js + UIKIT</h3>
+    <button class="uk-button uk-button-default" title="Hello World" uk-tooltip>Hover</button>
+    <div class="uk-inline">
+      <button class="uk-button uk-button-default" type="button">Click</button>
+      <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
+    </div>
+    <hr class="uk-divider-icon">
+    <nuxt-link to="/about">About page</nuxt-link>
+  </div>
+</template>

examples/uikit/plugins/uikit.js

@@ -0,0 +1,5 @@
+import UIkit from 'uikit'
+import Icons from 'uikit/dist/js/uikit-icons'
+
+// loads the Icon plugin
+UIkit.use(Icons);