How to use UIkit with Vue? - vue.js

Question

I installed uikit with yarn.
yarn add uikit
And additionally less-loader, less and css-loader because this site said so.
Now I tried using UIkit in my App.vue like so.
<template>
<div id="app">
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>This is a text!</p>
</div>
<table class="uk-table uk-table-striped">
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
</table>
</div>
</template>
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
mounted: function() {
this.getTestJson();
},
methods: {
getTestJson: function() {
this.$http.get('http://localhost:8090/test').then((res) => {
console.log(res.body)
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
This is not enough, the UIkit components are not displayed properly. What else do I have to do?
Do I have to use vuikit?

Answer 1

This link will help, and basically you need to do the following:
After installing uikit package, add this code to App.vue
<style lang="less">
#import "../node_modules/uikit/src/less/uikit.less";
</style>
And then add this code to main.js
import uk from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
uk.use(Icons)
You can also add global mixin for uk object in case you wanted to use UIKit JavaScript functionality anywhere in your components e.g. this.uk.toggle('#toggle-elm').toggle():
Vue.mixin({
data: function () {
return {
get uk () {
return uk
}
}
}
})
new Vue({
el: '#app',
...