Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Last update: Aug 10, 2022

Inkline logo

Inkline

Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @alexgrozav.


Vue.js UI/UX Library - Inkline


Homepage · Documentation · Issue Tracker


npm version Build Coverage Status Downloads Discord

Table of contents

Installation

Read the Getting Started page and find information on framework contents, templates, examples, and more.

Vue CLI Installation - Inkline Nuxt.js Installation - Inkline Custom Installation - Inkline CDN Installation - Inkline

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Community

Get updates on Inkline's development and chat with the project maintainers and community members.

  • Follow @inkline on Twitter.
  • Join Inkline on Discord.
  • Developers should use the keyword inkline on packages which modify or add to the functionality of Inkline when distributing through npm or similar delivery mechanisms for maximum discoverability.

Releases

Previous releases and their documentation are also available for download.

Versioning

For increased transparency and backward compatibility, Inkline is maintained under the Semantic Versioning guidelines.

Creators

Alex Grozav

Contributing

Please read through our contributing guidelines. There you can find directions for opening issues, feature requests, coding standards, and how to setup a local development environment.

Thanks goes to these wonderful people:

Alex Grozav Manuel Tancoigne Reniel Salvador The Jared Wilcurt Bogdan Saliuk marbocub Dimitrios Mandamadiotis roiLeo

Copyright and license

Code copyright 2017-2020 Inkline Authors. Code released under the MIT License.

GitHub

https://github.com/inkline/inkline/
Comments
  • 1. Nuxt.js Installation Guide not working

    Hi,

    i have tried to install inkline with your new installation guide but its not working. At the end you talk about editing files in src folder which is not existing. It looks like you just copied over the guide from vue?!?!

    Reviewed by milaan-muc at 2022-01-18 18:38
  • 2. Switch from Stylus to SASS

    This would probably increase adoption.

    I wrote the project styles in Stylus simply because it's what I expected the SASS Indented syntax to be.

    SASS ended up being the most used and appreciated option in State of CSS, while Stylus is the last. https://2019.stateofcss.com/technologies/pre-post-processors/

    Everything written in Stylus would probably require minor changes to be turned into SASS (indented syntax).

    Should we switch to SASS?

    Reviewed by alexgrozav at 2019-06-25 16:33
  • 3. Navbar alignment does not work

    • I'm submitting a:

      • [x] Bug Report
    • What is the current behavior? The navbar nav placement does not work

    • What is the expected behavior? The should be positionned on the right of the navbar It seems that some classes are missing

    <i-navbar-brand to="/">FLOWOLF</i-navbar-brand>
      <i-navbar-items class="_justify-content-end">
        <i-nav>
          <i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
          <i-nav-item :to="{ name: 'about' }">About</i-nav-item>
          <i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
        </i-nav>
    </i-navbar-items>
    

    The result is that the is still on the left of the navbar.

    • Please tell us about your environment:

      • Version: 1.0.0
      • Browser: [Chrome Version 73.0.3683.103 (Build officiel) (64 bits) ]
      • Language: [VueJS]
    • Other information I simply execute npm install @inkline/inkline

    Reviewed by bpingris at 2019-04-14 16:12
  • 4. Creating Vue App with Vue CLI results in `module parse fail`

    • I'm submitting a:

      • [x] Bug Report
    • Steps to reproduce Here is a minimal repository (and ordered commits) showing the steps that I took.

    https://github.com/agarbutt/vue-cli-ts-inkline

    1. follow the "Vue CLI Getting started instructions"
    2. npm run serve
    • What is the expected behavior? I believe we expect to have a running Vue app.

    • What is the current behavior? Multiple compiler failures from webpack. It seems to fail when loading / parsing the components provided in the package @inkline/inkline

    • Please tell us about your environment:

      • Version: 3.0.6
      • Browser: [n/a]
      • Language: [TypeScript ~4.1.5 | ES6/7 ]
      • Vue CLI: @vue/cli 4.5.15
      • Vue: [email protected]
    • Other information Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.

    This is an example of the errors dumped to the console. ` error in ./node_modules/@inkline/inkline/components/IDropdown/components/IDropdownItem/script.mjs?vue&type=script&lang=js

    Module parse failed: Unexpected token (88:38) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | methods: { | onClick(event) {

            this.dropdown.onItemClick?.(this, event);
    

    | } | }

    @ ./node_modules/@inkline/inkline/components/IDropdown/components/IDropdownItem/script.mjs?vue&type=script&lang=js 1:0-65 1:0-65 1:66-120 1:66-120 @ ./node_modules/@inkline/inkline/components/IDropdown/components/IDropdownItem/index.vue @ ./node_modules/@inkline/inkline/components/IDropdown/components/index.mjs @ ./node_modules/@inkline/inkline/components/index.mjs @ ./node_modules/@inkline/inkline/inkline.mjs @ ./src/main.ts @ multi (webpack)-dev-server/client?http://192.168.1.10:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts `

    Reviewed by agarbutt at 2022-01-20 18:34
  • 5. Inkline 3

    Here you can track the progress on Inkline 3, the Vue 3 rewrite that will keep all of the awesome features of version 2, but has some huge improvements under the hood.

    Changelog:

    • Development workflow using Vite
    • Build workflow using Vue CLI
    • Hybrid SASS and CSS Variables with fine-grained design control
    • Overall component UI, UX and DX improvements
    Reviewed by alexgrozav at 2021-01-06 08:06
  • 6. No API for hamburger button or collapse in NavBar

    • I'm submitting a:

      • [ ] Bug Report
      • [X] Feature Request
    • What is the current behavior? I would like to be able to control collapsing the items when an item is clicked. Right now it remains collapsed even after you clicked 1 item. image

    • What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

    • Please tell us about your environment:

      • Version: 1.0.0
      • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
      • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]
    • Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

    Reviewed by tomtakumi at 2019-09-06 14:18
  • 7. Update Popper.js to version 2

    • I'm submitting a:

      • [ ] Bug Report
      • [x] Feature Request

    [email protected] has been released and can be found under @popperjs/core. Update the PopupProviderMixin.vue file.

    Reviewed by alexgrozav at 2020-02-02 09:05
  • 8. Treeshaking compile produce error

    • I'm submitting a:

      • [*] Bug Report
      • [ ] Feature Request
    • What is the current behavior?

    Treeshaking compiling produces error as below:

    Module parse failed: Unexpected token (5:14) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export class PopupManager {

    instances = {};
    

    | modalStack = []; | zIndex = 1000;

    @ ./node_modules/@inkline/inkline/src/helpers/index.js 21:0-57 21:0-57 @ ./node_modules/@inkline/inkline/src/components/Select/script.js?vue&type=script&lang=js& @ ./node_modules/@inkline/inkline/src/components/Select/script.js?vue&type=script&lang=js& @ ./node_modules/@inkline/inkline/src/components/Select/index.vue @ ./node_modules/@inkline/inkline/src/components/index.js @ ./node_modules/@inkline/inkline/src/index.js

    • Please tell us about your environment:

      • Version: 1.0.0
      • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    • package.json file

    { "name": "inkline.test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@inkline/inkline": "^1.16.12", "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.11.0", "@vue/cli-plugin-eslint": "^3.11.0", "@vue/cli-service": "^3.11.0", "babel-eslint": "^10.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "node-sass": "^4.12.0", "sass-loader": "^8.0.0", "sass-resources-loader": "^2.0.1", "resolve-url-loader": "^3.1.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ] }

    main.js

    import Vue from 'vue'

    import Inkline from '@/plugins/inkline.js'

    import App from '@/layout/App.vue' import router from '@/router' import store from '@/store'

    Vue.config.productionTip = false

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

    @/plugin/inkline.js

    import Vue from 'vue'; import '@inkline/inkline/src/index.scss'; import { Inkline, IButton, IForm, IInput } from '@inkline/inkline/src/index';

    Vue.use(Inkline, { components: [ IButton, IForm, IInput ] });

    • Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)
    Reviewed by webidew at 2019-10-11 16:02
  • 9. Select not updating selected value after filters are changed

    • I'm submitting a:

      • [x] Bug Report
      • [ ] Feature Request
    • What is the current behavior? When changing the filters for the i-select-option during runtime, this error is produced: image The current behavior of the select is that the value selected is not correct. See this JS fiddle for the difference between normal select and i-select. https://jsfiddle.net/816d9skh/

    • What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.) The select should be able to update based on filters that are dynamic (computed filters as well).

    • Please tell us about your environment:

      • Version: CDN
      • Browser: Chrome 74.0.3729.169 | Mobile Chrome XX
      • Language: ES6/7
    • Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

    Reviewed by cassmbautista at 2019-08-20 01:59
  • 10. NavBar not showed up on >medium display, but showed up on small display

    • What is the expected and current behavior? NavBar not showed up on >medium display, but showed up on small display

    you can check it out https://jamal.indomascot.com

    • Steps to reproduce https://github.com/jamaluddinrumi/jamal.indomascot.com.v3

    • Please tell us about your environment:



    - Version: @inkline/[email protected], @inkline/[email protected]
    - Browser: [all]
    - Language: [all]
    
    • Other information i also got these error below
    [Bridge] Error in listener for event b:component:selected-data with args: 
    
    TypeError: Cannot convert a Symbol value to a string
    
    

    Screen Shot 2022-06-16 at 10 30 17 PM

    Reviewed by jamaluddinrumi at 2022-06-16 15:32
  • 11. Treeshaking on Nuxt3

    Hi,

    I followed instructions to install Inkline on Nuxt3.

    Seems like treeshaking isn't working. All components are included both in dev and build.

    I started Discussion thread about it, but later realized its more of an Issue. Thank you

    Reviewed by tasiotas at 2022-04-21 03:45
  • 12. Clearable doesnt appear right

    The clearable icon on the input component does not render properly, in development or production Only works fine in Firefox

    • Steps to reproduce Add clearable option to input

    • Please tell us about your environment:

      • Version: >=3.0.0
      • Browser: [Brave 1.41 and Chrome 104 ]
      • Language: [all | JavaScript | ES]

    package.json { "name": "vite-vue3", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "@inkline/inkline": "^3.0.9", "firebase": "^9.9.0", "pinia": "^2.0.14", "remixicon": "^2.5.0", "vue": "^3.2.25", "vue-router": "^4.1.1" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", "sass": "^1.53.0", "unplugin-vue-components": "^0.21.0", "vite": "^3.0.0" } } Screenshot_2022-07-31_14-21-47

    firefox

    Screenshot_2022-07-31_14-30-46

    Reviewed by R0N1n-dev at 2022-07-31 11:29
  • 13. Improve editor support via Web Types

    • Summary Web-types is an open source standard for documenting various web frameworks. It provides editors with detailed information on your component library. It would be nice if Inkline had it's own Web-types definition.

    More info: https://blog.jetbrains.com/webstorm/2021/01/web-types/ https://github.com/JetBrains/web-types

    • Motivation I very recently started using Inkline (like it so far!), but my default editor (Intellij IDEA) does not recognize the component names (<i-* .../>) by default and does no auto completion of properties etc. Upon searching for a quick solution, I stumbled upon Web-types and thought it would be cool to have this for Inkline. I believe it would be a great way to stimulate adoption!
    Reviewed by joostthehost at 2022-07-12 08:33
  • 14. Sizing of iButtonGroup doesn't work

    • What is the expected and current behavior? Actual behavior: Buttons in the button group are medium sized Expected behavior: Buttons adjust size when the size="sm" is set on the iButtonGroup element

    • Steps to reproduce If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. See that buttons are not different sizes in the Size Variants example.

    • Please tell us about your environment:

      • Version: "vue": "^3.2.37", "@inkline/inkline": "^3.0.9"
      • Browser: Chrome 103.0.5060.66 | Firefox 102.0 (64-bit)
    • Other information image

    Reviewed by joewelds at 2022-07-06 19:17
  • 15. i-icon - Failed to resolve component: icon

    When I try to use i-icon component,

    <template>
      <i-icon name="ink-check" />
    </template>
    

    I get this error:

    If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.```
    

    All other components work fine, does icon needs special config?

    repro: https://stackblitz.com/edit/nuxt-starter-sivhwx?file=app.vue

    Reviewed by tasiotas at 2022-06-28 02:47
  • 16. click-outside - mouseup vs mousedown

    Currently click-outside Directive is firing on mouseup event. That is causing some unexpected behavior in Modal. When I drag-select input field in modal, and release mouse button outside the modal, it closes.

    Perhaps you could consider switching to 'mousedown' event?

    Thank you

    Reviewed by tasiotas at 2022-06-23 18:56
  • 17. dark mode in Nuxt3

    • What is the expected and current behavior? Initial class assignment for color modes is wrong when page loads. Once I toggle between dark/light modes, classes are set correctly.

    • Steps to reproduce Open minimal starter in StackBlitz. Take a look at "invisible" labels on checkbox and toggle. https://stackblitz.com/edit/nuxt-starter-7vdjmd?file=app.vue

      Please set your preferred browser color scheme to dark.

    • Please tell us about your environment: "nuxt": "3.0.0-rc.4", "sass": "^1.52.3" "@inkline/inkline": "^3.0.9", "@inkline/nuxt": "^3.1.3"

    Reviewed by tasiotas at 2022-06-21 23:15
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

Jul 5, 2022
Vue3 ready components library built with love and care designed to integrate beautifully with Bulma CSS

Vue3-ui Vue3 ready components library built with love and care designed to integrate beautifully with Bulma CSS Documentation The full documentation f

Aug 13, 2022
A Vue.js 2.0 universal responsive UI component library

A Vue.js 2.0 universal responsive UI component library.. ?? Only for study purposes, do not use in production Docs Home Page Storybook Getting Started

May 4, 2021
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

Aug 9, 2022
A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.
A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

Naive UI A Vue 3 Component Library Fairly Complete, Customizable Themes, Uses TypeScript, Not too Slow Kinda Interesting English | 中文 Documentation ww

Aug 12, 2022
A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Aug 16, 2022
Humans is designed for mobile and desktop for human users, To help developer to build UI quickly
Humans is designed for mobile and desktop for human users, To help developer to build UI quickly

Humans is designed for mobile and desktop for human users. And it is vue-based implementation. To help developer to build UI quickly.

Aug 9, 2021
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

Framevuerk Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on Vue.js. Setup First of all, you shoul

Jun 29, 2022
Flow-UI is a highly customizable UI framework based Seajs/jQuery。
Flow-UI is a highly customizable UI framework based Seajs/jQuery。

English | 中文 Flow-UI ?? Flow-UI is a highly customizable UI framework based Seajs/jQuery。 Introduction Flow-UI has built-in CSS components, JS plug-in

Jul 26, 2022
MADE Vue - A library of Vue 3 UI Components
 MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

May 1, 2022
N3-components , Powerful Vue UI Library.
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

Aug 4, 2022
🎉 A high quality component library built on Vue.js 2.0

dao-style A high quality component library built on Vue.js. English | 简体中文 Docs latest Who's using dao-style DaoCloud DaoVoice If you are also using d

Jul 10, 2022
Free and Open Source UI Library for Vue 3 🤘
Free and Open Source UI Library for Vue 3 🤘

Free and Open Source UI Library for Vue 3 ??

Aug 11, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Aug 15, 2022
AnyUI - A cute UI components library for Vue 3
AnyUI - A cute UI components library for Vue 3

AnyUI This is a cute UI components library for Vue 3. IMPORTANT: This project is still working in progress. How to use Step 1: Install the @any-design

Jun 13, 2022
Syncfusion Vue UI Components Library

Syncfusion Vue UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 50+ UI components that every applications will ever need.

Oct 2, 2020
A Vue 3 Component Library🖖
A Vue 3 Component Library🖖

Unge - Means young in Danish Introduce ?? A component library based on Vue3 ?? Writen in .jsx | .vue && stylus Usage Install $ yarn add ungeui Import

Aug 15, 2022
An enterprise-level UI component library and front-end solution based on Vue.js 3

An enterprise-level UI component library and front-end solution based on Vue.js 3

Aug 9, 2022
A library of UI widgets built using Vue.js and TailwindCSS.
A library of UI widgets built using Vue.js and TailwindCSS.

This library contains a set of UI widgets / components. They range from something as simple as a button, to as complex as a fully-featured Markdown-based text editor. Originally, these components were exclusively part of Lumeno's codebase, however they have since been extracted, extended and made available for open-source use.

Aug 9, 2022