Vue UI components with configurable classes ready for TailwindCSS

Last update: Aug 15, 2022

Vue-Tailwind

CI

For more info, check the official site: https://vue-tailwind.com/.

VueTailwind is a set of Vue components created to be customized to adapt to your application's unique design.

Another UI library?

Most component libraries depend on CSS frameworks with an opinionated and limited number of styles defined by the people who maintain those libraries.

Those libraries are great and make our work easy, but hey, we made a beautiful custom design, right?

So what are the alternatives?

We can use a framework like TailwindCss to define our style, but that will end with us writing long CSS classes repeatedly, which could quickly become unmaintainable. Also, create some components like modals, date pickers, etc., is a tricky task, and let's admit it, nobody has time for that, right?

Best of both worlds

The VueTailwind components are meant to be customized with custom CSS classes that you can define when you install the library.

Plus, most component settings are configurable, so using this library is like having your personal set of components for your particular needs.

All that means that with this library, you will be able to:

  • Define your components look and feel by defining custom default CSS classes.
  • Add unlimited variants for every specific use case.
  • Override the default value of the props according to your needs.
  • Create different versions of one component with different default settings.

Installation

1. Install the dependencies

npm install vue-tailwind --save

Or:

yarn add vue-tailwind

2. Install TailwindCSS (Optional)

This library uses TailwindCSS classes by default. Still, it should work with any CSS framework since all the CSS classes are configurable.

To install TailwindCSS follow his official documentation: https://tailwindcss.com/docs/installation

2.1 Add the @tailwindcss/forms plugin

The default theme of this library depends on the @tailwindcss/forms plugin. To use it, follow the steps on the plugin source page. https://github.com/tailwindlabs/tailwindcss-forms

2.1 Add variants for disabled pseudo-class

Also needed for the default theme and strongly recommended since it adds the ability to use some classes like disabled:opacity-50 disabled:cursor-not-allowed to disabled inputs.

See https://tailwindcss.com/docs/configuring-variants on the TailwindCSS docs for more info.

As a reference, your tailwind.config.js may look like this:

module.exports = {
  variants: {
    extend: {
      opacity: ['disabled'],
      cursor: ['disabled'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

3. Configure Vue to use vue-tailwind

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const components = {
  // ...You need to add the components you need here (explained above)
}

Vue.use(VueTailwind, components)

3.1 Import and install the components

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

import {
  TInput,
  TTextarea,
  TSelect,
  TRadio,
  TCheckbox,
  TButton,
  TInputGroup,
  TCard,
  TAlert,
  TModal,
  TDropdown,
  TRichSelect,
  TPagination,
  TTag,
  TRadioGroup,
  TCheckboxGroup,
  TTable,
  TDatepicker,
  TToggle,
  TDialog,
} from 'vue-tailwind/dist/components';

const settings = {
  // Use the following syntax
  // {component-name}: {
  //   component: {importedComponentObject},
  //   props: {
  //     {propToOverride}: {newDefaultValue}
  //     {propToOverride2}: {newDefaultValue2}
  //   }
  // }
  't-input': {
    component: TInput,
    props: {
      classes: 'border-2 block w-full rounded text-gray-800'
      // ...More settings
    }
  },
  't-textarea': {
    component: TTextarea,
    props: {
      classes: 'border-2 block w-full rounded text-gray-800'
      // ...More settings
    }
  },
  // ...Rest of the components
}

Vue.use(VueTailwind, settings)

3.2 Alternatively, you can use the v1.0 syntax

import Vue from 'vue'
// Notice that I am using a different path here:
import VueTailwind from 'vue-tailwind/dist/full'

const settings = {
  TInput: {
    classes: 'border-2 block w-full rounded text-gray-800',
    // ...More settings
  },
  TButton: {
    classes: 'rounded-lg border block inline-flex items-center justify-center',
    // ...More settings
  },
  // ...Rest of the components
}

Vue.use(VueTailwind, settings)

3.3 Or install only the components you need

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

import TInput from 'vue-tailwind/dist/t-input'
import TButton from 'vue-tailwind/dist/t-button'

const settings = {
  't-input': {
    component: TInput,
    props: {
      classes: 'block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
      // ...More settings
    }
  },
  't-button': {
    component: TButton,
    props: {
      classes: 'block px-4 py-2 text-white transition duration-100 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50  disabled:opacity-50 disabled:cursor-not-allowed',
      // ...More settings
    }
  },
}

Vue.use(VueTailwind, settings)

Note: Using the syntax from point 3.3 is the best way to prevent a big bundle size but only if you import a couple of components. If the number of components you install increases, the recommended way to install them is to use the syntax from the points 3.1 or 3.2 to help the library reuse some code and keep the bundle size at a minimum.

Read more →

Theming

To apply a custom theme you should play with the classes, fixedClasses, and variants props.

The classes and fixedClasses props usually expects an string with a CSS class for single-tag components (inputs, button, etc.) and an object for more complex components (modals, datepicker, etc) (see component docs for details).

The variants props expects an object where every key represents the variant name and every value the classes that will be used when that variant is applied.

Example for a single-tag component:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TButton from 'vue-tailwind/dist/t-button'

const settings = {
  't-button': {
    component: TButton,
    props: {
      // The fixed classes will never change and will be merged with the `classes` value or the active variant
      fixedClasses: 'focus:outline-none focus:shadow-outline inline-flex items-center transition ease-in-out duration-150',
      // Classes used when any variant is active
      classes: 'text-white bg-blue-600 hover:bg-blue-500 focus:border-blue-700 active:bg-blue-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
      variants: {
        // A red variant of the button (applied when `<t-button variant="error" />`)
        error: 'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 active:bg-red-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
        // A green variant of the button (applied when `<t-button variant="success" />`)
        success: 'text-white bg-green-600 hover:bg-green-500 focus:border-green-700 active:bg-green-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
        // ...unlimited variants
      }
      // ...More settings
    }
  },
}

Vue.use(VueTailwind, settings)

Example for a complex component:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TAlert from 'vue-tailwind/dist/t-alert'

const settings = {
  't-alert': {
    component: TAlert,
    props: {
      // The fixed classes will never change and will be merged with the `classes` value or the active variant
      fixedClasses: {
        wrapper: 'rounded p-4 flex text-sm border-l-4',
        body: 'flex-grow',
        close: 'ml-4 rounded',
        closeIcon: 'h-5 w-5 fill-current'
      },
      classes: {
        wrapper: 'bg-blue-100 border-blue-500',
        body: 'text-blue-700',
        close: 'text-blue-700 hover:text-blue-500 hover:bg-blue-200',
        closeIcon: 'h-5 w-5 fill-current'
      },
      variants: {
        danger: {
          wrapper: 'bg-red-100 border-red-500',
          body: 'text-red-700',
          close: 'text-red-700 hover:text-red-500 hover:bg-red-200'
          // Notice that I am not defining the `closeIcon` class since we only
          // need to write the classes we want to override
        },
      }
    }
  },
}

Vue.use(VueTailwind, settings)

Read more →

Override settings

All the components on this library have default settings added as component props according to how we understand those settings are most commonly used.

I am aware that in many cases is useful to change the default value, so you don't need to add the prop over and over when needed.

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

import TDatepicker from 'vue-tailwind/dist/t-datepicker'
import TButton from 'vue-tailwind/dist/t-button'
import TModal from 'vue-tailwind/dist/t-modal'

// Locale to eventually replace the default Datepicker locale
import Spanish from 'vue-tailwind/dist/l10n/es'

const settings = {
  't-button': {
    component: TButton,
    props: {
      // classes: '...',
      // variants: '...',
      // ...
      // Originally it defaults to `undefined` that means is considered a submit
      // button if the button is inside a form.
      type: 'button',
    }
  },
  't-datepicker': {
    component: TDatepicker,
    props: {
      // classes: '...',
      // variants: '...',
      // ...
      // Originally a locale object with English values
      locale: Spanish,
    }
  },
  't-modal': {
    component: TModal,
    props: {
      // classes: '...',
      // variants: '...',
      // ...
      // Originally `true`
      escToClose: false,
    }
  },
}

Vue.use(VueTailwind, settings)

You can also use this feature to create different versions of the same component.

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

import TButton from 'vue-tailwind/dist/t-button'
import TTag from 'vue-tailwind/dist/t-tag'

const settings = {
  // What about one <t-button /> for normal button and a `<t-submit />` for a submit button
  't-button': {
    component: TButton,
    props: {
      type: 'button',
    }
  },
  't-submit': {
    component: TButton,
    props: {
      type: 'submit',
    }
  },
  // I love this use case for the TTag component and will let you guess what
  // is doing: 👇
  'blog-title': { // Used like <blog-title>Title of a blog post</blog-title>
    component: TTag,
    props: {
      tag: 'h1',
      classes: 'font-semibold text-xl leading-6',
    }
  },
  'blog-subtitle': { // Used like <blog-title>subtitle of a blog post</blog-title>
    component: TTag,
    props: {
      tag: 'h2',
      classes: 'font-semibold text-xl leading-6',
    }
  },
  't-link': { // Used like <t-link href="">Open site</t-link>
    component: TTag,
    props: {
      tag: 'a',
      classes: 'text-blue-500 underline hover:text-blue-600',
    }
  }
}

Vue.use(VueTailwind, settings)

Read more →

Workflow

Once your different variants were defined you can use the variant prop to define which variant should be applied:

<t-input variant="error" />

The variant prop also accepts an object that takes the first attribute with a truthy value

<t-input
  :variant="{
    error: inputIsNotValid,
    success: inputIsValid,
  }"
/>

Read more →

What's new in version 2.x

  • Install only the components you need for smaller bundle size
  • Custom name for components
  • The ability to install the same component multiple times with different default settings and name
  • New default theme

Plans for v3.x

  • Rebuild with Vue 3
  • Multiple typescript improvements
  • Stronger test coverage
  • Accesibility first
  • New Branding

Read more →

Contribute

Is this project helpful for you? Consider sponsoring me https://github.com/sponsors/alfonsobries.

Of course, any other kind help is welcome, even if you notice some grammar mistakes (English is not my primary language) see contribute page for details.

Changelog

Please see Release notes for more information about what was changed recently.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

Made with love by @alfonsobries

GitHub

https://github.com/alfonsobries/vue-tailwind
Comments
  • 1. export 'default' was not found in 'vue-tailwind'

    I must be doing something wrong :(

    Plain out-of-the-box ~~everything~~ Vue works perfectly 🥳

    The minute I try to add ~~something~~Vue Tailwind (2.1.3) - I get this

    hermes_1    | 
    hermes_1    | ERROR in ./app/javascript/packs/hermes_vue.js 33:15-21
    hermes_1    | "export 'TInput' was not found in 'vue-tailwind/dist/components/'
    hermes_1    | 
    hermes_1    | ERROR in ./app/javascript/packs/hermes_vue.js 39:8-19
    hermes_1    | "export 'default' (imported as 'VueTailwind') was not found in 'vue-tailwind'
    hermes_1    | 
    
    

    My app.vue has one added element

    <template>
      <div id="app">
        <t-input />
        <p>{{ message }}</p>
      </div>
    </template>
    
    

    and my javascript-pack mentions this

    
    import Vue from 'vue'
    import VueTailwind from 'vue-tailwind'
    import App from '../components/app.vue'
    
    import {
      TInput,
    } from 'vue-tailwind/dist/components/'
    
    const components = {
      't-input': {
        component: TInput,
        props: {
          classes: 'border-2 block w-full rounded text-gray-800'
        }
      }
    }
    
    Vue.use(VueTailwind, components)
    
    document.addEventListener('DOMContentLoaded', () => {
      const app = new Vue({
        render: h => h(App)
      }).$mount()
      document.body.appendChild(app.$el)
    
      console.log(app)
    })
    
    
    Reviewed by wdiechmann at 2021-03-09 17:43
  • 2. Support for Vue 3?

    Hi @alfonsobries

    At first. Thank you very much for this awesome library.

    I've read that you want to support Vue 3 in the future.

    Do you have some more concrete timetable when to release a version for Vue 3?

    Can I support you in some way? From coding perspective I haven't enough knowledge about Vue, but perhaps sponsoring you will help the development?

    Thanks in advance!

    xyNNN

    Reviewed by xyNNN at 2021-01-07 13:31
  • 3. enableBodyScroll unsuccessful on v2

    Hey, thanks a lot for the amazing plugin, iv been using since v1 and today i have attempted to updated to v2 beta, and it was a breeze.

    Just noticed a little error on the console that seems to root on TModal Component, and wanted to report, not sure if you have noticed:

    enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices

    Node 12 VueTailwind 2.0.01 Vue 2

    Not sure if this is already fixed on the current pull request but let me know if something needs to be done or set any option.

    Once again thanks for the amazing work! :) Keep it up.

    Reviewed by igerslike at 2020-11-20 22:19
  • 4. Cannot find module '@/types/CssClass'

    ERROR in D:/Code/Exenzo/jobboost.io-app/node_modules/vue-tailwind/dist/components/TDatepicker.d.ts(1,43) Cannot find module '@/utils/dates' ERROR in D:/Code/Exenzo/jobboost.io-app/node_modules/vue-tailwind/dist/components/TPagination.d.ts(2,22): Cannot find module '@/types/CssClass'.

    And many others, it seems that the internal aliases are not working.

    Reviewed by moodyVlad at 2020-09-17 17:26
  • 5. [BUG] Needs to be updated to Vue 2.6.14

    Alphonso,

    Version 2.3.0 and below will no longer install for the current version of Nuxt (2.15.7) as it requires Vue assets 2.6.14

    vue
    vue-template-compiler
    

    I think that's all but there could be more.

    Reviewed by ghost at 2021-06-16 06:32
  • 6. Unable to use vue-tailwind in nuxt generated app

    In my nuxt.js project I am using the datepicker. I import the library as a plugin in this way:

    /plugins/vue-tailwind.js

    import Vue from 'vue'
    import VueTailwind from 'vue-tailwind'
    Vue.use(VueTailwind)
    

    /nuxt.config.js

    plugins: ['~plugins/vue-tailwind']
    

    and the component works perfectly in development.

    My problem is that the component is not rendered when I serve the app generated with

    nuxt generate
    

    I already tried to load the plugin this way:

    { src: '~plugins/vue-tailwind', mode:  'client' }
    

    and also tried to put the component between client-only tag

    <client-only>
                <t-datepicker
                  v-model="date"
                  :max-date="today"
                  placeholder="Select a date"
                  date-format="Y-m-d"
                  user-format="d-M-Y"
                />
    </client-only>
    
    Reviewed by fparaggio at 2021-01-18 17:34
  • 7. Rich select does not show selected item on route change

    Using TRichSelect on two different pages which vue router load/render them. On first load it works as expected but when navigating to the other page or get back to the current page selected item text is not showing however when I open the select the option is highlighted. Please check screen shots showing selectedOption is not set when it has localValue

    Screen Shot 2020-08-20 at 12 11 24 pm Screen Shot 2020-08-20 at 12 10 51 pm

    Reviewed by mossen at 2020-08-20 03:58
  • 8. Null props error on t-dropdown and t-button (solution mooted)

    When I use the t-dropdown component (using examples) I get:

    [Vue warn]: Invalid prop: type check failed for prop "href". Expected String with value "null", got Null

    Then if I click on the button I get:

    
    [Vue warn]: Error in v-on handler: "TypeError: e is null"
    
    found in
    
    ---> <TButton>
           <Popper> at popper.js.vue
             <TDropdown>
               <Index> at resources/js/pages/Dashboard/Participants/Index.vue
                 <Dashboard> at resources/js/layouts/dashboard.vue
                   <Inertia>
                     <Root>
    
    Reviewed by ejntaylor at 2020-04-09 16:32
  • 9. [bug] Custom Modal theme not working with dist files

    src/main.js

    import Vue from 'vue';
    import app from '@core/app';
    import router from '@plugins/router/router';
    import store from '@plugins/state/';
    import './js/registerServiceWorker';
    import './assets/sass/tailwind.scss';
    import './js/plugins/vuetailwind'
    Vue.config.productionTip = true;
    
    new Vue({
    	store,
    	router,
    	render: h => h(app),
    }).$mount('#app');
    

    js/plugins/vuetailwind

    import Vue from 'vue';
    import VueTailwind from 'vue-tailwind';
    import TModal from './modal';
    
    Vue.use(VueTailwind, {
    	theme: {
    		TModal
    	}
    });
    
    

    modal.js

    const TModal = {
    	baseClass: 'z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed text-primary',
    	overlayClass: 'z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-black opacity-75',
    	containerClass: 'z-50 relative p-3 mx-auto my-0 max-w-full',
    	closeIconClass: 'fill-current h-6 w-6 absolute right-0 top-0 m-6',
    	wrapperClass: 'bg-primary rounded shadow-lg border flex flex-col overflow-hidden',
    	headerClass: 'bg-secondary px-6 py-3 text-xl border-b',
    	bodyClass: 'text-primary p-6 flex-grow',
    	footerClass: 'bg-secondary px-6 py-3 border-t',
    };
    
    export default TModal
    

    It doesn't work, but when I change it from :

    import VueTailwind from 'vue-tailwind'
    

    to:

    import VueTailwind from 'vue-tailwind/src/index'
    

    My custom theme works, I'm not sure if this is intentional or not because of the docs doesn't include the /src/index part

    https://vue-tailwind.com/#install-and-use

    Reviewed by ghost at 2019-07-17 01:48
  • 10. Feature/progress bar

    Add Progress Bar component

    • [x] progress bar grows with v-model

    Question

    @alfonsobries A interesting feature/prop with the progress bar could be indeterminate state. To show this state, we could use css animations but tailwind doesn't provide utilities to do that... I'm beginner with tailwind but I think it's possible to use plugins to accomplish what we need. Did you think about a solution ? Let's discuss about it !

    Reviewed by jeanlouisgicquel at 2019-07-02 14:35
  • 11. before-close doesn't pass event on modals.

    Hi!

    I'm trying to prevent one of my app's modals from closing, but i'm not receiving the event parameter on my event handler. I have no idea of what to do, it just doesn't work :(

    I'm using the component incorrectly?

    <template>
      <t-modal ref="modal" v-model="show" ... @before-close="beforeClose">
        ...
      </t-modal>
    </template>
    
    <script>
    export default {
    
      ...
    
      methods: {
        beforeClose (e) {
          console.log(e) // undefined
          e.stop()
        }
      }
    }
    </script>
    

    Thanks in advance!

    Reviewed by maverick504 at 2019-11-19 06:08
  • 12. Bump terser from 4.7.0 to 4.8.1

    Bumps terser from 4.7.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 05:15
  • 13. Bump shell-quote from 1.7.2 to 1.7.3

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-23 04:39
  • 14. Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 19:39
  • 15. Bump node-fetch from 2.6.1 to 2.6.7

    Bumps node-fetch from 2.6.1 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-15 14:55
  • 16. Bump nanoid from 3.1.23 to 3.3.2

    Bumps nanoid from 3.1.23 to 3.3.2.

    Changelog

    Sourced from nanoid's changelog.

    3.3.2

    • Fixed enhanced-resolve support.

    3.3.1

    • Reduced package size.

    3.3

    • Added size argument to function from customAlphabet (by Stefan Sundin).

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

    3.1.30

    • Reduced size for project with brotli compression (by Anton Khlynovskiy).

    3.1.29

    • Reduced npm package size.

    3.1.28

    • Reduced npm package size.

    3.1.27

    • Cleaned dependencies from development tools.

    3.1.26

    • Improved performance (by Eitan Har-Shoshanim).
    • Reduced npm package size.

    3.1.25

    • Fixed browserify support.

    3.1.24

    • Fixed browserify support (by Artur Paikin).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-15 14:55
A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

Aug 12, 2022
Vue components based on the JUI components available in Vue.js

vue-uix A vue component library based on the JUI components available in vuejs. Installation NPM npm install --save vue-uix Browser (Legacy) If you ar

Feb 9, 2021
The components are mostly a straight-forward port of the PatternFly 4 components to Vue 3

The components are mostly a straight-forward port of the PatternFly 4 components to Vue 3 with some differences where it makes sense to improve ergonomics or add new features.

May 31, 2022
Material web components for Vue.js

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139 Vue Material Components web Material Components Web f

Aug 12, 2022
Bootstrap 3 components implemented by Vue 2.
Bootstrap 3 components implemented by Vue 2.

If this project has helped you out, please support it with a star ?? . 中文文档 Introduction uiv is a Bootstrap 3 component lib implemented by Vue 2. Ligh

Aug 2, 2022
Bootstrap components built with Vue.js

vue-strap Bootstrap components built with Vue.js. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a

Jul 1, 2022
high scalability && freedom vue ui components

En|中文 Docs Overview The goal of jsmod is to provide a high degree of freedom (high scalability) ui components, and unified desktop and mobile usage, i

Dec 10, 2021
Semantic-ui components easy in your vue project
Semantic-ui components easy in your vue project

Semantic-ui modules/components in you Vue project Using You can see the docs and demo here # install package npm install semvue --save Using any compo

Jul 30, 2020
New Framework Components for Vue.js 2
New Framework Components for Vue.js 2

Supporting through Patreon Vuesax is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this

Aug 13, 2022
Vue UI and data visualization components

DevExtreme Vue UI and Visualization Components This project allows you to use DevExtreme components in Vue applications. Documentation Technical Demos

Aug 5, 2022
👩‍🎨👨‍🎨 A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.
👩‍🎨👨‍🎨 A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.

Documentation You can browse the documentation for Vue Dark Mode on the website. Installation npm install @growthbunker/vuedarkmode # Or if you prefe

Jul 29, 2022
🎨 Vue.js components implementing Microsoft Fluent Design

Vuent Vuent is a set of reusable UI components for Vue created according to Microsoft Fluent Design, in particular its official variation about buildi

Aug 6, 2022
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Aug 11, 2022
A collection of bootstrap components for Vue 2

This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework.

Feb 4, 2022
🤹 Vue Composables putting your components in motion

?? Vue Composables putting your components in motion

Aug 11, 2022
Components library for VUE used by the Ebury online team

Components library for VUE used by the Ebury online team

Jul 20, 2022
Simple components library used for building lightweight vuejs projects

slim-ui slim-ui is a simple vue components library contains needed UI elements. It was developed to solve zerodha's application frontend needs and gen

Jul 28, 2022
基于VueJS的组件库。 Components for VueJS.

z-vue-components Components for VueJS2.0 如果你使用的vue版本小于2.1.5,请使用1.x.x的z-vue-components。 如果你使用的vue版本大于等于2.1.5,请使用2.x.x的z-vue-components。 Installation $

Mar 24, 2018
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

Keen UI Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't

Aug 8, 2022