Node's Pastoral Musicians

    @govflanders/vl-ui-vue-components

    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: 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'],
    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 {
      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.

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    763

    Version

    14.0.9

    License

    MIT

    Unpacked Size

    29.3 MB

    Total Files

    10

    Last publish

    Collaborators

    • 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