This is an article aimed at beginners and there's lots of screenshots included. The gist is that you have to install less preprocessor, add UI-kit in dependencies, and edit App.vue to include it. There is also a section on how to use the theme used in the uikit website.

First, install the vue cli 3.0. It has a UI server, and is really nice.

Install cli 3.0

If you have been using vue-cli 2.0 , go ahead and uninstall it. After that, let’s install vue-cli 3.0 .

Install Vue CLI 3.0

yarn global add @vue/cli   
# or use npm if you prefer that
npm install -g @vue/cli

Check version with

vue --version

Create a new project

cd to the directory where you want to create your project folder. Then do

vue ui

This starts a the new GUI for vue cli 3.0. It’s super awesome, btw.

Click on create.

Now you can select all the features you want, and they’ll be automatically installed and setup! Cli 3 magic ✨

Make sure Babel and CSS-preprocessors are part of your selection.

I've de-selected others, but feel free to use them. (Except Typescript, then we might need to change the JS)

Select Less cause that's what UiKit uses, and we need it to compile it. If you plan to use some other preprocessor, you can probably make that work by installing npm install --save-dev less-loader less css. Let me know if you need help with that.

Wait for vue-cli to finish setting the project.

Add UiKit

In the Dependencies section, click 'Install dependency'

Type and select uikit.

Good now we have Uikit installed. Let's edit App.vue to use Uikit.

Edit App.vue

App.vue is in the src folder.

Add these lines inside the script tag.

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);

and add this line inside the style tag.

@import "../node_modules/uikit/src/less/uikit.less";

Your src/App.js should look something like this. I removed the default content inside the style tags.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>


<script>
  import UIkit from 'uikit';
  import Icons from 'uikit/dist/js/uikit-icons';
  UIkit.use(Icons);
  export default {
      name: 'App',
  };
</script>

<style lang="less">
  @import "../node_modules/uikit/src/less/uikit.less";
</style>

We're all set! The next section is editing the HelloWorld component to test everything worked correctly.

Edit HelloWorld.vue

Replace the template tag in src/components/HelloWorld.vue with html that uses UiKit.

I just copied the cards template from UiKit website (https://getuikit.com/docs/card#style-modifiers) and removed the included styling.

Your src/components/HelloWorld.vue file would look like this now.

<template>

<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

Start the development server

Back the the cli GUI. There is a tab called 'Tasks'. In it, select 'Serve' and click 'Run Task'. This starts a development server. Alternatively, you can run yarn serve or npm run serve and get the same thing going.

Head to http://localhost:8080/ . If everything went well, you would see something like this.

Those cards are the ones we took from UiKit. Congrats ✨!  

Adding UiKit styling

You might notice that the styling on our development page is not exactly like the demos shown in Uikit website. That's because they're using a custom theme. Let’s change that.

Go to the Github repo for UiKit website. https://github.com/uikit/uikit-site

There are two files in the folder named less. We need both of them.

In your src/assets folder, create 3 new folders.

cd src/assets
mkdir fonts images less

Copy the highlight.less and theme.less folder into the folder named less.

cd less

wget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/highlight.less

wget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/theme.less

There is some editing we need to do on the theme.less file.

Change the first line @import "../assets/uikit/src/less/uikit.theme.less to

@import "../../../node_modules/uikit/src/less/uikit.theme.less";

Change the second line from

@import "highlight.less";
# to
@import "./highlight.less";

Below these lines in theme.less, you can see some fonts being included. Let’s get them.

cd ../fonts
UK="https://getuikit.com"
wget $UK/fonts/ProximaNova-Light-webfont.woff2
wget $UK/fonts/ProximaNova-Light-webfont.woff
wget $UK/fonts/ProximaNova-Reg-webfont.woff2
wget $UK/fonts/ProximaNova-Reg-webfont.woff
wget $UK/fonts/ProximaNova-Sbold-webfont.woff2
wget $UK/fonts/ProximaNova-Sbold-webfont.woff
wget $UK/fonts/montserrat-600.woff2
wget $UK/fonts/montserrat-600.woff
wget $UK/fonts/roboto-mono-regular.woff2
wget $UK/fonts/roboto-mono-regular.woff

Further down below in theme.less, there is another line which reads

url("../images/section-background.svg")

Let’s that svg as well.

cd ../images
UK="https://getuikit.com"
wget $UK/images/section-background.svg

All set!

We are all set! Just update your App.js styles section to include our new file.

<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
@import "./assets/less/theme.less";
</style>

And restart your dev server. The styles should be same as the UiKit website now.

Note: I’ve replaced the Navbar with a table and some other components. I’ve also removed some of the styling that was already present in autogenerated vue file.

Conclusion

You can find my Github repository created by following this tutorial here: https://github.com/zeroby0/vue-uikit-webpack-vuecli3

A demo of a site built with that is here: https://vue3-uikit.netlify.com/

Feel free to drop a comment if you are stuck and need help 🙂.