@wivi/ui NPM | npm.io

Wivi UI

Wivi UI is a lightweight library of responsive UI components for Vue.js based on Wivi Styleguide. 🎨

NPM

Installation

After creating a project with vue-cli or custom-made

npm install @wivi/ui

Usage

Full bundle

import Vue from 'vue'
import WiviUI from '@wivi/ui'
import '@wivi/ui/dist/wivi-ui.css'

Vue.use(WiviUI)

Individual components as Vue plugins

import Vue from 'vue'
import { WButton } from '@wivi/ui'
import '@wivi/ui/dist/wivi-ui.css'

Vue.use(WButton)

Individual component

import Vue from 'vue'
import { WButton } from '@wivi/ui'
import '@wivi/ui/dist/wivi-ui.css'

Vue.component('app', {
  components: { WButton },
  data () {
    return { count: 0 }
  },
  template: '<w-button @click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
})

Standalone

Using CDN or downloading files to serve local

Installation

Just download or use these as CDN:

Usage

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://wivi.io/packages/wivi-ui/dist/wivi-ui.min.css">
</head>

<body>
    <div id="app">
        <!-- Wivi UI components goes here -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- Full bundle -->
    <script src="https://wivi.io/packages/wivi-ui/dist/wivi-ui.min.js"></script>

    <!-- Individual component -->
    <script src="https://wivi.io/packages/wivi-ui/dist/button"></script>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

Typescript

The library is javascript based but types are supported with d.ts files. You should get the types automatically when installing wivi-ui. For any issues, check out our FAQ.