mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Add UIkit example
This commit is contained in:
parent
8340779620
commit
7f8f62672d
5
examples/uikit/README.md
Normal file
5
examples/uikit/README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# UIKit with Nuxt.js
|
||||
|
||||
UIkit: https://github.com/uikit/uikit
|
||||
|
||||
https://nuxtjs.org/examples
|
5
examples/uikit/layouts/default.vue
Normal file
5
examples/uikit/layouts/default.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="uk-container">
|
||||
<nuxt/>
|
||||
</div>
|
||||
</template>
|
6
examples/uikit/nuxt.config.js
Normal file
6
examples/uikit/nuxt.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
css: ['uikit/dist/css/uikit.css'],
|
||||
plugins: [
|
||||
{ src: '~/plugins/uikit.js', ssr: false }
|
||||
]
|
||||
}
|
13
examples/uikit/package.json
Normal file
13
examples/uikit/package.json
Normal 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"
|
||||
}
|
||||
}
|
19
examples/uikit/pages/about.vue
Normal file
19
examples/uikit/pages/about.vue
Normal 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>
|
12
examples/uikit/pages/index.vue
Normal file
12
examples/uikit/pages/index.vue
Normal 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>
|
5
examples/uikit/plugins/uikit.js
Normal file
5
examples/uikit/plugins/uikit.js
Normal file
@ -0,0 +1,5 @@
|
||||
import UIkit from 'uikit'
|
||||
import Icons from 'uikit/dist/js/uikit-icons'
|
||||
|
||||
// loads the Icon plugin
|
||||
UIkit.use(Icons);
|
Loading…
Reference in New Issue
Block a user