HHL-UI

Install in project via NPM or YARN

# install
npm install hhl-ui # OR 
yarn add hhl-ui

Use lazy load All

The only thing to do is to import "hhl-ui" then each component will be lazy loadet, when you use a componet. It will also load the main css.

import Vue from "vue";
import App from "./App.vue";
import "hhl-ui";

new Vue({
  render: (h) => h(App)
}).$mount('#app');

Or use individual components global

import Vue from "vue";
import App from "./App.vue";
import "hhl-ui/style";
import {hhlBtn} from  "hhl-ui";

Vue.component("hhlBtn", hhlBtn);

new Vue({
  render: (h) => h(App)
}).$mount('#app');

Or use individual components local

<template>
  <hhl-btn>Local</hhl-btn>
</template>

<script>
import {hhlBtn} from  "hhl-ui";

export default {
  components: {
    hhlBtn,
  },
};
</script>

Via Script tag from CDN

 <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link rel="stylesheet" href="https://unpkg.com/hhl-ui@latest/dist/hhl-ui.css">
      <link rel="stylesheet" href="https://unpkg.com/hhl-ui@latest/dist/hhl-ui.css">
      <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
      <script src="https://unpkg.com/hhl-ui@latest/dist/hhl-ui.umd.min.js"></script>
    </head>
    <body>
      <div id="app">
        <hhl-btn>Hello World</hhl-btn>
      </div>
      
      <script>
        new Vue({
          el: '#app'
        })
      </script>
    </body>
    </html>

New project with Vue-cli

Enable features:

Babel: true
Linter/Formatter: true
Use config files: true

Pick a linter/formatter config

Those ESLINT + Standard config

ES Configuration

Select config: Recommended.

JS config

Add a jsconfig.json to the root. Containing this.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "."
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules",
    "**/node_modules/*"
  ]
}

ES lint setup

This is the recommended eslintrc.js settings

module.exports = {
  "globals": {
    "hhl": true
  },
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/recommended',
    '@vue/standard'
  ],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "vue/no-v-html": "off",
    "semi": ["error", "always"],
    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
    "camelcase": "off",
    "vue/name-property-casing": "off",
    "vue/require-default-prop": "off",
    "space-before-function-paren": ["error", "never"],
    "vue/singleline-html-element-content-newline": "off",
    "vue/max-attributes-per-line": ["error", {
      "singleline": 5,
      "multiline": {
        "max": 4,
        "allowFirstLine": true
      }
    }],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],
    "vue/html-closing-bracket-spacing": ["error", {
      "startTag": "never",
      "endTag": "never",
      "selfClosingTag": "never"
    }]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

Theme colors →