Vue Components

Getting started with Vue components

Vue components are standard Webcomponents that are wrapped within Vue JS. They serve the same purpose, and have the same functionality.

Install the Vue library

Vue components can be found at: https://www.npmjs.com/package/@govflanders/vl-ui-vue-components

Import in Nuxt

1. Create vl-ui-vue-components.js in your plugins folder and add it to your Nuxt config (nuxt.config.js file):

plugins: ['~/plugins/vl-ui-vue-components'],

2. Add the Vue components dependency to the build Object in your Nuxt config (nuxt.config.js file):

build: {
    maxChunkSize: 1000000,
    vendor: ['@govflanders/vl-ui-vue-components'],
  },

3. Specify the components you want to use in ./plugins/vl-ui-vue-components.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import {
  VlTitle,
  VlTitleCta,
  VlTitleSublink,
  VlButton,
  i18n,
} from '@govflanders/vl-ui-vue-components';

Vue.component('vl-title', VlTitle);
Vue.component('vl-title-cta', VlTitleCta);
Vue.component('vl-title-sublink', VlTitleSublink);
Vue.component('vl-button', VlButton);

Vue.use(VlCore);
Vue.use(VlUtil);
Vue.use(VueI18n);

const messages = i18n;
const vlI18n = new VueI18n({
  locale: 'nl-BE',
  messages,
});

Vue.use(vlI18n);

Note: Since the components are loaded as a plugin, you don’t need to reïmport them in every component or template.

Documentation

There is no documentation yet, but you can find live examples in the vl-build repository

Vl-build

To access the root files check out the dev branch of https://bitbucket.org/vlaamseoverheid/vl-build/.

Run the following commands:

npm install
npm run util:bootstrap
npm run vue:serve

A new browserwindow will prompt with a select box. All components that are available are in the select box.

Code examples

Go to the ./vue/docs/<component-name>/<component-name>.vue and select a component you would like to see code examples of.

To see the source template of a Vue component go to ./package/<component-name>/src/vue/<component-name>.vue.

To see the source logic of a Vue component go to ./package/<component-name>/src/vue/<component-name>.js

Adding styles

Vue components only contain Vue functionality. In order to embed the correct SCSS install the appropriate NPM packages and import the SCSS to your local build. Howto can be found at https://overheid.vlaanderen.be/webuniversum/v3/.

Make sure you have access to the private NPM packages. Ask on Slack for more information.