global-ui

Vue.js UI Components Library - Made for NuxtJS & VueJS Developers.

Usage no npm install needed!

<script type="module">
  import globalUi from 'https://cdn.skypack.dev/global-ui';
</script>

README

GlobalUI - Open Source Vue UI Components Library built for Nuxt.js & Vue.js Developers. Linkedin

Template

GlobalUI :+1: is an Open Source UI Kit built from VueJS. GlobalUI is a solution for any agency that wants to keep their UI consistent at either development & production ( e.g Buttons, Inputs, etc ). Facing future changes, GlobalUI can bring efficiency so developers can do changes for just 1 time. Made for Nuxt.js & Vue.js Developers.

Table of Contents

Installation

Several options are available:

NPM

$ npm install global-ui --save

Yarn

$ yarn add global-ui

Development

Components Developed :

  • GlobalButton :heavy_check_mark:
  • GlobalInput :heavy_check_mark:
  • GlobalSwitch :heavy_check_mark:
  • GlobalCheckbox :heavy_check_mark:
  • GlobalAccordion :heavy_check_mark:
  • GlobalDropdown :heavy_check_mark:
  • GlobalAnimationLoader :heavy_check_mark:
  • GlobalBaseDialog :heavy_check_mark:

Components On-Development :

  • Currently there are no any component development plan :no_entry:

Usage

Several options are available:

Vue 2

can see example repo here :arrow_right: https://github.com/Frederick-88/vue-global-ui-tester

The Setups are:

  1. Register/Import Global Components
  • in folder "src/main.js", inside can import components like this
import Vue from "vue";
import App from "./App.vue";

import vClickOutside from "v-click-outside";
import GlobalUIs from "global-ui";

Vue.use(vClickOutside);
Vue.use(GlobalUIs); // with this code, its already importing all global components =)

new Vue({
  render: function(h) {
    return h(App);
  },
}).$mount("#app");

  1. Import Global UI's SCSS Variables
  • install 3 things required for Global UI's SCSS variables :arrow_down:
npm i @nuxtjs/style-resources node-sass@4.14.1 sass-loader@7.3.1
  • Create "vue.config.js" in root folder and fill it with :
const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // method of SCSS to use variables globally
        data: `
            @import '~node_modules/global-ui/src/assets/styles/variables.scss';
            @import '~node_modules/global-ui/src/assets/icomoon/variables.scss';
            @import '@/assets/variables.scss';
          `,
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
        node_modules: path.resolve("node_modules/"),
      },
    },
  },
};
  1. Import Global UI's Icomoon Icon Sets
  • in folder "assets", create "variables.scss" or if you have existing, inside add :

$icomoon-font-path: "~node_modules/global-ui/src/assets/icomoon/fonts";

  • in your root page / root component import icomoon scss in your