Node's Pastoral Musicians


    14.0.9 • Public • Published

    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:

    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'],
    1. 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'],
    1. Specify the components you want to use in ./plugins/vl-ui-vue-components.js
    import Vue from 'vue';
    import VueI18n from 'vue-i18n';
    import {
    } 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);
    const messages = i18n;
    const vlI18n = new VueI18n({
      locale: 'nl-BE',

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


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


    To access the root files check out the dev branch of

    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

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




    npm i @govflanders/vl-ui-vue-components

    DownloadsWeekly Downloads






    Unpacked Size

    29.3 MB

    Total Files


    Last publish


    • lore-maes
    • apiteam.mbp
    • thomas.seberechts.vl
    • maarten.vansteenkiste
    • aiv-geopunt
    • larsvh
    • fcantineau
    • jorgwyckmansvl
    • azzawi_vo
    • schophil
    • jensvervaeren
    • frederic.hennequin
    • rafphiltjens
    • jonathanmeurrens
    • adriaanmeuris
    • adriaanbaelus
    • warrebuysse
    • govflanders_admin
    • gugalamaciek
    • pixel-vlaanderen
    • fedjkhikacim
    • coemans