almendra-rocket v0.1.15-dev.0

Dependencies

You need Vue.js version 2.6+.

Install via npm

npm install https://cdn.playvox.net/almendra-components/master/1.0.0/almendra-components-1.0.0.tgz

Import and use almendra components

In whatever component what you want to develop, import the component individually, and then include it in vue component option.

// into component.vue

import { AlLink } from 'almendra-components';

export default {
  name: 'MyComponentName',
  components: {
    AlLink
  }
};

Or you can use all components as global just register in a plugin.

// almendra-components-plugin.js

import Vue from 'vue';
import almendra from 'almendra-components';

Vue.use(almendra);

It is needed import style separately, can be include it in html tag or adding in config files, i.e. with nuxt.

// in nuxt.config.js

  /*
   ** Global CSS
   */
  css: [
    'almendra-components/dist/almendra.css'
  ],

Alternatively, you can use a CDN

Add css stylesheet

<link
  rel="stylesheet"
  href="https://cdn.playvox.net/almendra-components/master/1.0.0/dist/almendra.css"
/>

And include VueJs before almendra components

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.playvox.net/almendra-components/master/1.0.0/dist/almendra.umd.js"></script>

<script>
  Vue.use(almendra.default);

  let myVue = new Vue({
    el: '#app'
  });
</script>

How to use

All components are instance as global components, for this, It doesn't needed to import each one in other components or Vue Object. the simple example below, show a ghost button from almendra components

<div id="app">
  It is a ghost button test
  <pv-button
    text="Add filter"
    image="https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg"
    is-ghost
    is-xs
  ></pv-button>
</div>

For more examples, view storybook folder