@ax2/vue-components

Ax2 components library including dynamic page builder based on Vue.

Use semantic-release;

Works with Vue 2.*

Installation

Install via NPM or YARN

npm install @ax2/vue-components --save
yarn add @ax2/vue-components

Register as Plugin

import Vue from 'vue';
import ComponentsLibrary from '@ax2/vue-components';

Vue.use(ComponentsLibrary);

Configuration

import Vue from 'vue';
import ComponentsLibrary from '@ax2/vue-components';
import CustomButton from './components/CustomButton';

const configuration = {
  config: { // Default config
    breakpoints: { // Default breakpoints
      xs: 0,
      sm: 576,
      md: 768,
      lg: 1024,
      xl: 1280,
    },
    apiUrl: process.env.baseURL || 'http://127.0.0.1:3002/api', // Url to call for page builder info
  },
  allComponents: true, // By default register all components
  components: ['PageBuilder'], // Register only some component globally
  customComponents: { // Override some component from library
    ButtonComponent: CustomButton,
  },
};
Vue.use(ComponentsLibrary, configuration);

Component are register globally, you can use them directly Example:

<template>
  <PageBuilder />
</template>

Install component in nuxt

You need to pass the nuxt store to install properly package store and have available state management

import Vue from 'vue';
import ComponentsLibrary from '@ax2/vue-components';

const configuration = {};

export default ({ store }) => {
  Vue.use(ComponentsLibrary, { store, ...configuration });
};

Components Library

• [ ] PageBuilder Documentation
• [ ] Block Documentation
• [ ] ButtonComponent Documentation
• [ ] Card Documentation
• [ ] Carousel Documentation
• [ ] Container Documentation
• [ ] Element Documentation
• [ ] HtmlComponent Documentation
• [ ] ImageComponent Documentation
• [ ] Section Documentation
• [ ] Video Documentation

Working in Local environnement

Using yarn link reference

yarn link # (in this repository)

yarn link @ax2/vue-components # (in repository you want to use your local version)

To reverse process use:

yarn unlink @ax2/vue-components

Changelog

Detailed changes for each release are documented in the release notes.