Add UIkit example

This commit is contained in:
Sebastien Chopin 2017-08-24 14:28:49 +02:00
parent 8340779620
commit 7f8f62672d
7 changed files with 65 additions and 0 deletions

5
examples/uikit/README.md Normal file
View File

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

View File

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

View File

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

View File

@ -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"
}
}

View File

@ -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>

View File

@ -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>

View File

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