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

Note: This section is for vue-cli 3 setup. If you’re already familiar with it, feel free to skip to the Add UiKit section. You should be able to use Uikit just fine regardless of the steps in this section.

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

npm install -g @vue/cli
# OR
yarn global add @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.

Use the Create button to create a new project. Import button to import already existing projects.

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

I’ve selected all except typescript. Select ‘Less’ for preprocessor.

Wait for vue-cli to finish setting the project.

Add UiKit

In the Dependencies section, click the button on top right corner to add new dependency.

Type and select uikit.

Good now we have Uikit installed.

Edit App.vue

Let’s edit src/App.vue . Update it like this. You have to add the script part.

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

Your src/App.js should look something like this.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </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>

Edit HelloWorld.vue

Replace the template tag in src/components/HelloWorld.vue with this.

I just copied the navigation bar template from UiKit website. https://getuikit.com/docs/navbar#multiple-navigations

<template>
  <div class="hello">
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
<ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>
</div>
</nav>
  </div>
</template>

Your src/components/HelloWorld.vue file should look like this now. Also, remove everything inside the style tags.

<template>
  <div class="hello">
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
<ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>
</div>
</nav>
  </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>

You can remove the content in style tags if you want. I just left it there,

Start the development server

yarn serve

# or
npm run serve

You should see something like this:

The Home | About and the Vue Logo are from the src/views/Home.vue file.

You know you are successful if you see the UiKit navigation bar properly.

Adding UiKit styling

You might notice that the styling on our development page is not exactly like the demos shown in Uikit website. 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

Feel free to drop a comment if you are stuck and need help. Please share if you liked it! Thank you

Github

#vue-js #node-js #web-development