ESLint plugin for Scoped CSS in Vue.js

Overview

eslint-plugin-vue-scoped-css

eslint-plugin-vue-scoped-css is ESLint plugin for Scoped CSS in Vue.js.

NPM license NPM version NPM downloads NPM downloads NPM downloads NPM downloads NPM downloads Build Status Coverage Status

Features

This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using Scoped CSS in Vue.js.

  • Provides linting rules for Scoped CSS.
  • Supports CSS syntax including level 4 selectors.
  • Supports <style lang="scss">.
  • Supports <style lang="stylus">.
  • Parses <style>, <template> and <script> blocks.

You can check on the Online DEMO.

Documentation

See documents.

Installation

npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser

Requirements

  • ESLint v6.0.0 and above
  • Node.js v12.22.x, v14.17.x, v16.x and above

Usage

Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue-scoped-css/vue3-recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue-scoped-css/no-unused-selector': 'error'
  }
}

Configs

This plugin provides some predefined configs:

  • plugin:vue-scoped-css/base - Settings and rules to enable this plugin
  • plugin:vue-scoped-css/recommended - /base, plus rules for better ways to help you avoid problems for Vue.js 2.x
  • plugin:vue-scoped-css/vue3-recommended - /base, plus rules for better ways to help you avoid problems for Vue.js 3.x
  • plugin:vue-scoped-css/all - All rules of this plugin are included

Rules

The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.

Recommended for Vue.js 3.x

Enforce all the rules in this category with:

{
  "extends": "plugin:vue-scoped-css/vue3-recommended"
}
Rule ID Description
vue-scoped-css/enforce-style-type enforce the <style> tags to be plain or have the scoped or module attribute
vue-scoped-css/no-deprecated-deep-combinator disallow using deprecated deep combinators 🔧
vue-scoped-css/no-parent-of-v-global disallow parent selector for ::v-global pseudo-element
vue-scoped-css/no-parsing-error disallow parsing errors in <style>
vue-scoped-css/no-unused-keyframes disallow @keyframes which don't use in Scoped CSS
vue-scoped-css/no-unused-selector disallow selectors defined in Scoped CSS that don't use in <template>
vue-scoped-css/require-v-deep-argument require selector argument to be passed to ::v-deep() 🔧
vue-scoped-css/require-v-global-argument require selector argument to be passed to ::v-global()
vue-scoped-css/require-v-slotted-argument require selector argument to be passed to ::v-slotted()

Recommended for Vue.js 2.x

Enforce all the rules in this category with:

{
  "extends": "plugin:vue-scoped-css/recommended"
}
Rule ID Description
vue-scoped-css/enforce-style-type enforce the <style> tags to be plain or have the scoped or module attribute
vue-scoped-css/no-parsing-error disallow parsing errors in <style>
vue-scoped-css/no-unused-keyframes disallow @keyframes which don't use in Scoped CSS
vue-scoped-css/no-unused-selector disallow selectors defined in Scoped CSS that don't use in <template>

Uncategorized

No preset enables the rules in this category. Please enable each rule if you want.

For example:

{
  "rules": {
    "vue-scoped-css/no-deprecated-v-enter-v-leave-class": "error"
  }
}
Rule ID Description
vue-scoped-css/no-deprecated-v-enter-v-leave-class disallow v-enter and v-leave classes.
vue-scoped-css/require-selector-used-inside disallow selectors defined that is not used inside <template>
vue-scoped-css/v-deep-pseudo-style enforce :deep()/::v-deep() style 🔧
vue-scoped-css/v-global-pseudo-style enforce :global()/::v-global() style 🔧
vue-scoped-css/v-slotted-pseudo-style enforce :slotted()/::v-slotted() style 🔧

Deprecated

  • ⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
  • 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.
Rule ID Replaced by
vue-scoped-css/require-scoped vue-scoped-css/enforce-style-type

Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

  • npm test runs tests and measures coverage.
  • npm run update runs in order to update readme and recommended configuration.

License

See the LICENSE file for license rights and limitations (MIT).

Comments
  • feat(enforce-style-type): new rule

    feat(enforce-style-type): new rule

    Closes https://github.com/future-architect/eslint-plugin-vue-scoped-css/issues/101

    I ended up naming it acceptCssModules instead of acceptModule because the name is actually plural "CSS Modules".

    Thank you


    I'm also curious if you'd be open to requiring scoping via CSS Modules as well. So instead of acceptCssModules, we do:

    {
    	"cssModules": undefined | "accept" | "require"
    }
    

    where:

    • undefined: Don't acknowledge module
    • accept: Accept module in-place of scope
    • require: Require scoping via module instead of scope

    Apr 26 Update:

    Implemented the following:

    {
    	"module": undefined | "accept" | "enforce"
    }
    

    May 20 Update:

    Implementing the following:

    {
    	allows: ("plain" | "scoped" | "module")[]
    }
    

    May 21 Update:

    Moved to new rule enforce-style-type

    opened by privatenumber 8
  • [new rule] vue-scoped-css/v-deep-pseudo-style

    [new rule] vue-scoped-css/v-deep-pseudo-style

    ~~I want to prevent using v-deep selector in my project but there is no such rule now.~~ ~~And I think it should not be a general rule, so I thought that I will use no-restricted-syntax rule.~~ ~~But there is no such rule now, so I created this issue.~~

    ~~If it should be declared as a general rule, maybe rule name is vue-scoped-css/no-v-deep?~~

    It would be better if there is a rule that enforces to use :deep() or ::v-deep(). Please see a new issue https://github.com/future-architect/eslint-plugin-vue-scoped-css/issues/258

    enhancement 
    opened by baseballyama 5
  • `require-v-deep-argument` | should fix with `:deep()`

    `require-v-deep-argument` | should fix with `:deep()`

    Hi! Is it possible to configure vue-scoped-css/require-v-deep-argument rule to apply fixes with :deep() instead of ::v-deep for Vue 3 projects?

    As stated in the following articles, the :deep() is currently supported syntax over the deprecated ::v-deep syntax.

    • https://vuejs.org/api/sfc-css-features.html#deep-selectors
    • https://stackoverflow.com/a/63986379/6934292
    enhancement help wanted 
    opened by seahindeniz 4
  • Unable to Install Plugin

    Unable to Install Plugin

    Hello,

    I am facing an error when trying to install this plugin using the npm command mentioned in the Readme. Error seems to be on a peer dependency. Not sure if this is related to dependencies in the plugin, or my project, or both.

    I am using node 14 and eslint 6.7. Appreciate any guidance on this. Thank you!

    npm WARN ERESOLVE overriding peer dependency
    npm WARN Found: [email protected]
    npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss
    npm WARN   postcss@"^8.2.4" from [email protected]
    npm WARN   node_modules/eslint-plugin-vue-scoped-css
    npm WARN     dev eslint-plugin-vue-scoped-css@"*" from the root project
    npm WARN 
    npm WARN Could not resolve dependency:
    npm WARN peer postcss@"^8.3.3" from [email protected]
    npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss-safe-parser
    npm WARN   postcss-safe-parser@"^6.0.0" from [email protected]
    npm WARN   node_modules/eslint-plugin-vue-scoped-css
    npm WARN ERESOLVE overriding peer dependency
    npm WARN Found: [email protected]
    npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss
    npm WARN   postcss@"^8.2.4" from [email protected]
    npm WARN   node_modules/eslint-plugin-vue-scoped-css
    npm WARN     dev eslint-plugin-vue-scoped-css@"*" from the root project
    npm WARN 
    npm WARN Could not resolve dependency:
    npm WARN peer postcss@"^8.3.3" from [email protected]
    npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss-scss
    npm WARN   postcss-scss@"^4.0.0" from [email protected]
    npm WARN   node_modules/eslint-plugin-vue-scoped-css
    npm ERR! code ETARGET
    npm ERR! notarget No matching version found for eslint-utils@^3.0.0.
    npm ERR! notarget In most cases you or one of your dependencies are requesting
    npm ERR! notarget a package version that doesn't exist.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/username/.npm/_logs/2022-02-02T19_21_53_038Z-debug.log
    
    opened by jkattampilly-te 4
  • Option to disallow scoped

    Option to disallow scoped

    Thanks for making this plugin! Our team has a slightly different use case: we'd like to enforce no scoped attribute, as we find the side effects of scoped CSS to be too risky. Any chance of modifying the require-scoped rule to allow for "always"/"never" options?

    enhancement good first issue 
    opened by racoleman 4
  • False positive of

    False positive of "unused selector" for SCSS and `v-for`

    Summary

    False positives seem to occur when using both self-referencing adjacent selector and v-for.

    Image

    image

    REPL

    <template>
      <div>
        <div v-for="str in strs" :key="str" class="repl-class">{{ str }}</div>
      </div>
    </template>
    
    <script>
    import { Component, Vue } from 'vue-property-decorator';
    
    @Component({ components: {} })
    export default class REPL extends Vue {
      private strs = ['a', 'b'];
    }
    </script>
    
    <style lang="scss" scoped>
    .repl-class {
      & + .repl-class {
        border-top: #ccc solid 1px;
      }
    }
    </style>
    
    bug 
    opened by baseballyama 3
  • chore(deps): update dependency stylelint-config-standard to v30

    chore(deps): update dependency stylelint-config-standard to v30

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylelint-config-standard | ^29.0.0 -> ^30.0.0 | age | adoption | passing | confidence |


    Release Notes

    stylelint/stylelint-config-standard

    v30.0.1

    Compare Source

    v30.0.0

    Compare Source

    • Removed: stylelint less than 15.0.0 from peer dependencies.
    • Removed: 64 rules deprecated in [email protected]. For details, see the migration guide.
    • Fixed: length-zero-no-unit to ignore custom properties.
    • Fixed: value-no-vendor-prefix to ignore -webkit-inline-box.

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • chore(deps): update dependency stylelint to v15

    chore(deps): update dependency stylelint to v15

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylelint (source) | ^14.9.1 -> ^15.0.0 | age | adoption | passing | confidence |


    Release Notes

    stylelint/stylelint

    v15.0.0

    Compare Source

    Migrating to 15.0.0 guide.


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • Installing with pnpm: `✕ missing peer vue-eslint-parser@>=7.1.0`

    Installing with pnpm: `✕ missing peer vue-eslint-parser@>=7.1.0`

    When installing eslint-plugin-vue-scoped-css, pnpm complains about vue-eslint-parser not being installed. In the README, the command is just npm install --save-dev eslint eslint-plugin-vue-scoped-css and everything seems to be working fine without having a direct dependency to vue-eslint-parser, so I'm wondering what's up with that? 🙂

    opened by KnifeFed 2
  • add possibility to enforce rules no-unused-*

    add possibility to enforce rules no-unused-*

    Now no-unused-keyframes and no-unused-selector rules only work if scoped style. There are situations when without scoped style I would like to use this rules. But there is no such possibility. It might be worth adding a new option scoped: Boolean

    enhancement 
    opened by max-norin 2
  • Class array-syntax breaks no-unused-selector

    Class array-syntax breaks no-unused-selector

    Using Array-Syntax with an inline if breaks reporting of no-unused-selector.
    Doing the same with Object-Syntax works fine.

    I added two testcases for demonstration (https://github.com/lukashass/eslint-plugin-vue-scoped-css/commit/f0bff82d100b2c944dbdd2ceab4aa280825fdcf4):

    // reports `.bar` as unused
    {
        code: `
        <template>
            <div><div :class="{foo: b}"/></div>
        </template>
        <style scoped>
        .foo {}
        .bar {}
        </style>
        <script>
        export default {
            data () {
                return {
                    b: true
                }
            }
        }
        </script>
        `,
        errors: [
            {
                messageId: "unused",
                data: { selector: ".bar" },
                line: 7,
                column: 13,
                endLine: 7,
                endColumn: 17,
            },
        ],
    },
    // should report `.bar` as unused but doesn't
    {
        code: `
        <template>
            <div><div :class="[b ? 'foo' : '']"/></div>
        </template>
        <style scoped>
        .foo {}
        .bar {}
        </style>
        <script>
        export default {
            data () {
                return {
                    b: true
                }
            }
        }
        </script>
        `,
        errors: [
            {
                messageId: "unused",
                data: { selector: ".bar" },
                line: 7,
                column: 13,
                endLine: 7,
                endColumn: 17,
            },
        ],
    },
    
    enhancement 
    opened by lukashass 2
  • chore(deps): update dependency rimraf to v4

    chore(deps): update dependency rimraf to v4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | rimraf | ^3.0.2 -> ^4.0.0 | age | adoption | passing | confidence |


    Release Notes

    isaacs/rimraf

    v4.4.0

    Compare Source

    v4.3.1

    Compare Source

    v4.3.0

    Compare Source

    v4.2.0

    Compare Source

    v4.1.4

    Compare Source

    v4.1.3

    Compare Source

    v4.1.2

    Compare Source

    v4.1.1

    Compare Source

    v4.1.0

    Compare Source

    v4.0.7

    Compare Source

    v4.0.6

    Compare Source

    v4.0.5

    Compare Source

    v4.0.4

    Compare Source

    v4.0.3

    Compare Source

    v4.0.2

    Compare Source

    v4.0.1

    Compare Source

    v4.0.0

    Compare Source


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • Class extends value undefined is not a constructor or null

    Class extends value undefined is not a constructor or null

    Getting the following error installing the plugin:

    TypeError: Failed to load plugin 'vue-scoped-css' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

    Here's my eslintrc.js file:

    module.exports = {
        env: {
            browser: true,
            es2021: true,
            node: true,
        },
        extends: [
            'plugin:vue/essential',
            'eslint:recommended',
            'plugin:vue-scoped-css/recommended',
        ],
        parserOptions: {
            parser: '@typescript-eslint/parser',
            ecmaVersion: 'latest',
            sourceType: 'module',
        },
        plugins: ['vue', '@typescript-eslint'],
        rules: {
            'import/order': 'off',
            'vue/no-v-html': 'off',
            'vue/no-unused-components': 'off',
            'no-unused-vars': 1,
            'no-undef': 2,
            'prefer-const': 2,
            'no-console': 0,
            'standard/computed-property-even-spacing': 'off',
            'object-shorthand': 'off',
            'vue-scoped-css/enforce-style-type': 'warn',
        },
    }
    

    I tried installing the plugin in a couple projects of mine and I still get the same error. Any idea what could be causing this?

    upstream issue 
    opened by Julien-Aubert-Housfy 4
  • Support router-link, nuxt-link and the like

    Support router-link, nuxt-link and the like

    For example:

    <template>
      <nuxt-link :to="`#`">button</nuxt-link>
    </template>
    
    <style scoped>
    a {
      color: red;
    }
    </style>
    

    nuxt-link is converted to a tag, but I get error: The selector `a` is unused. Please support.

    Maybe something like this in the settings:

    'vue-scoped-css/no-unused-selector': ['warn', {
      'equalTags': {
        'nuxt-link': 'a',
        'n-link': 'a',
        'NuxtLink': 'a',
        'NLink': 'a',
        'router-link': 'a'
      },
    }]
    
    opened by DragonWhisperer 4
  • False

    False "unused selector" for SCSS Extend

    <template>
      <h1 class="eng-title">hello</h1>
    </template>
    
    <style scoped lang="scss">
    %title {
      font-size: 2rem;
    }
    
    .eng-title {
      @extend %title;
    }
    </style>
    

    I get: The selector `%title` is unused.

    bug help wanted 
    opened by DragonWhisperer 0
  • not only BEM

    not only BEM

    vue-scoped-css/no-unused-selector rule has ignoreBEMModifier option Besides BEM, there are other ways to organize CSS code. For example RSCCS, where the modifier is defined as in the following code. More details here.

    .like-button {
      &.-wide { /* ... */ }
      &.-short { /* ... */ }
      &.-disabled { /* ... */ }
    }
    

    Also, development teams can use custom modifier naming. Сreator of the stylelint-selector-bem-pattern made it possible to specify a regular expression to define a modifier. Maybe you should pay attention to this.

    enhancement help wanted 
    opened by max-norin 2
Releases(v2.4.0)
  • v2.4.0(Jan 26, 2023)

  • v2.3.0(Jan 26, 2023)

    Minor Changes

    • feat: add v-deep-pseudo-style, v-slotted-pseudo-style, and v-global-pseudo-style rules (#259)

    • feat: add checkUnscoped option to no-unused-keyframes, no-unused-selector, and require-selector-used-inside rules (#255)

    • feat: support for description in directive comments (#256)

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Feb 3, 2022)

    ⚙️ Updates

    • Update dependencies by @ota-meshi in https://github.com/future-architect/eslint-plugin-vue-scoped-css/pull/187

    Full Changelog: https://github.com/future-architect/eslint-plugin-vue-scoped-css/compare/v2.1.0...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Dec 24, 2021)

    🐛 Bug Fixes

    • Fix false positives for v-for in no-unused-selector rule by @ota-meshi in https://github.com/future-architect/eslint-plugin-vue-scoped-css/pull/180

    Full Changelog: https://github.com/future-architect/eslint-plugin-vue-scoped-css/compare/v2.0.0...v2.1.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Oct 29, 2021)

    💥 Breaking Changes

    • Upgraded dependencies.
    • Drop support for Node<v12 and ESLint v5 by @ota-meshi in https://github.com/future-architect/eslint-plugin-vue-scoped-css/pull/168
    • Change preset config by @ota-meshi in https://github.com/future-architect/eslint-plugin-vue-scoped-css/pull/169

    Full Changelog: https://github.com/future-architect/eslint-plugin-vue-scoped-css/compare/v1.3.0...v2.0.0

    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Aug 22, 2021)

  • v1.2.2(Jul 13, 2021)

  • v1.2.1(May 25, 2021)

    :bug: Bugfixes

    • #125 Fixed typo in message in vue-scoped-css/enforce-style-type rule, and improve message in vue-scoped-css/enforce-style-type rule.
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(May 25, 2021)

    ✨ New Features

    • #102 Added vue-scoped-css/enforce-style-type rule that enforce the <style> tags to be plain or have the scoped or module attribute.

    ⚙️ Updates

    • #124 Change vue-scoped-css/require-scoped rule to deprecated.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Dec 27, 2020)

    ✨ New Features

    • #52 Changed to detect export default defineComponent({}) as Vue component.
    • #53 Added vue-scoped-css/no-deprecated-v-enter-v-leave-class rule that disallow v-enter and v-leave classes.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Jul 22, 2020)

    💥 Breaking Changes

    • #38 Drop supports ESLint 5.x
    • #38 Drop supports vue-eslint-parser 5.x and 6.x
    • #38 Moved vue-eslint-parser to "peerDependencies" from "dependencies"
    • #38 Upgrade dependencies

    ✨ New Features

    • #38 Supports for Vue.js 3.x Scoped styles. Related to RFC0023
      • #38 Changed vue-scoped-css/no-unused-selector rule to support ::v-deep(),::v-slotted() and ::v-global pseudo-element.
      • #38 Changed vue-scoped-css/require-selector-used-inside rule to support ::v-deep(),::v-slotted() and ::v-global pseudo-element.
    • #38 Supports for Vue.js 3.x v-enter-from and v-leave-from. Related to RFC0018
      • #38 Changed vue-scoped-css/no-unused-selector rule to support v-enter-from and v-leave-from.
      • #38 Changed vue-scoped-css/require-selector-used-inside rule to support v-enter-from and v-leave-from.

    New Rules

    • #39 Added vue-scoped-css/no-deprecated-deep-combinator rule that reports the use of deprecated deep combinators as errors. Related to RFC0023
    • #41 Added vue-scoped-css/require-v-deep-argument rule that reports ::v-deep pseudo-element with no selector argument passed. Related to RFC0023
    • #42 Added vue-scoped-css/require-v-slotted-argument rule that reports ::v-slotted pseudo-element with no selector argument passed. Related to RFC0023
    • #43 Added vue-scoped-css/require-v-global-argument rule that reports ::v-global pseudo-element with no selector argument passed. Related to RFC0023
    • #45 Added vue-scoped-css/no-parent-of-v-global rule that reports parent selector for ::v-global pseudo-element. Related to RFC0023
    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(May 9, 2020)

  • v0.4.0(Apr 22, 2020)

  • v0.3.4(Jan 27, 2020)

    :bug: Bugfixes

    • #24 Fixed: issue with vue files without templates: TypeError: Cannot read property 'range' of null.

    Thank you very much, @simllll!

    Source code(tar.gz)
    Source code(zip)
  • v0.3.3(Jan 14, 2020)

  • v0.3.2(Jan 14, 2020)

    :bug: Bugfixes

    • #21 Fixed false positives when ignoreBEMModifier and captureClassesFromDoc were used together in no-unused-selector and require-selector-used-inside.
    Source code(tar.gz)
    Source code(zip)
  • v0.3.1(Nov 29, 2019)

  • v0.3.0(Nov 28, 2019)

    ✨ New Features

    • #16 Supports Stylus.
    • #17 Added suggestion to require-scoped
    • #19 Added option to not report errors if documentation of class names exist to no-unused-selector and require-selector-used-inside.

    :bug: Bugfixes

    • #18 Fixed false positives when using <slot> with <transition>.
    Source code(tar.gz)
    Source code(zip)
  • v0.2.2(Nov 26, 2019)

  • v0.2.1(Nov 18, 2019)

  • v0.2.0(Nov 18, 2019)

  • v0.1.0(Nov 16, 2019)

Owner
Future Corp
Future's official open source repositories
Future Corp
🌶 Just my spiced up ESLint shareable config to be used with XO ❤️

eslint-config-paprika Just my spiced up ESLint shareable config to be used with XO Install $ npm install --save-dev xo eslint-config-paprika Usage Ad

Federico Giovagnoli 0 May 15, 2017
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Tugay Yaldız 155 Nov 24, 2022
Website to generate strong password. Made with Vue 3 & Tailwind CSS

vue-pw-generator A website to generate strong password. Made with Vue.js & Tailwind CSS. Project setup npm install Compiles and hot-reloads for devel

Don 7 Nov 20, 2022
A classic game created using a stack of Vue+Vite and Tailwind for implementing a Light/Dark UI option and neat CSS

TicTacToe Game A classic game created using a stack of Vue+Vite and Tailwind for implementing a Light/Dark UI option and neat CSS, overall. Live demo

Artem Solovev 1 Mar 2, 2022
Learning Resources App is a simple web application built using Vue js, HTML, CSS, and JavaScript

Learning Resources App is a simple web application built using Vue js, HTML, CSS, and JavaScript

norhan reda 4 Sep 4, 2022
It's a Vue Project where I use composition API, implemented with html, css, vuejs.

?? Table of Contents About website description Project setup Compiles and hot-reloads for development Website link Contributors About It's a Vue Proje

Asmaa Adel 2 Aug 28, 2022
project planner application implemented with Vue.js, HTML and CSS.

?? Table of Contents About website description Project setup Compiles and hot-reloads for development Website link ScreenShots Contributors About proj

Asmaa Adel 5 Oct 25, 2022
Writing inline CSS style in Vue component with ease.

Vue Inline Styled Writing inline CSS style in Vue component with ease. Use style-to-object under the hood. Installation Via npm: npm install vue-inlin

Saran Tanpituckpong ✔️ 0 Jan 15, 2021
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

null 646 Dec 28, 2022
CSS Transform Playground. Online tool to visualize 2D & 3D CSS3 Transform functions.

css-transform › css-transform.moro.es CSS3 Transform Functions Playground. Demo UI built with Vue, Gulp and LESS. Deployment via Netlify Development —

Jorge Moreno 132 Dec 7, 2022
Agnosticui - a set of UI primitives that start their lives in clean HTML and CSS

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CS

null 547 Jan 4, 2023
This project is based on Codepen and use vuejs to render a live view html/js/css of your code

Homemade Codepen This project is based on Codepen, and use vuejs to render a live view html/js/css of your code. Features Live preview of your code Ed

Erwan Martin 2 May 6, 2022
≡𝘿𝙖𝙨𝙝 A tiny, powerful, framework-agnostic CSS-in-JS library

A tiny, powerful, framework-agnostic CSS-in-JS library npm i @dash-ui/styles Features Tiny (< 6kB), but comprehensive api Bring your own UI framework

Dash 31 Oct 21, 2022
Veo Robotics Stylelint rules for all CSS / SCSS styles

@veobot/stylelint-config Veo Robotics Stylelint rules for all CSS / SCSS styles Installation Install the package and all of its peer dependencies: $ n

Veo Robotics 1 Feb 11, 2020
A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

vue-model-autoset A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive. Imagine a huge form w

Konstantin 18 Jul 30, 2020
Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

aesoper 16 Nov 24, 2022
Vue-slot-portal - Vue plugin for across-component slot distribution

vue-slot-portal Vue plugin for across-component slot distribution. install npm i vue-slot-portal usage define slot routes (key: slotName, value: compo

An Yan 2 Apr 13, 2022
Simple portal vue cli plugin, done by rewriting vue files

vue-cli-plugin-portal Simple portal vue cli plugin, done by rewriting vue files Installation: vue add vue-cli-plugin-portal Or through vue ui, search

jarek 0 Mar 30, 2020
🍪 👮 Hackable EU Cookie Law Plugin for Vue.js

?? ?? Vue Cookie Law EU Cookie Law Plugin for Vue.js ?? Demo ?? Install yarn add vue-cookie-law ?? Usage <template> <footer> <cookie-law theme="

Jakub 375 Dec 18, 2022