Vue component CSS class name helper directive

Overview

v-class-name

Add CSS class name which based on name property.

import vueClassName from 'v-class-name'
Vue.use(vueClassName)
<template>
  <div v-class-name>
    <h1 v-class-name="'_Heading'">
      heading
    </h1>
    <div v-class-name="'_Content'">
      content
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

👇

<div class="MyComponent">
  <h1 class="MyComponent_Heading">
    heading
  </h1>
  <div class="MyComponent_Content">
    content
  </div>
</div>
You might also like...
Chess Web Game with Vue JS 3 and Tailwind CSS
Chess Web Game with Vue JS 3 and Tailwind CSS

Chessplay Chess Web Game with Vue JS 3 and WindiCSS Installation

UI components for Vue.js based on Spectre CSS Framework
UI components for Vue.js based on Spectre CSS Framework

Zutre NOTE: Project in development, do not use at production zutre is a set of UI components for VueJS based on Spectre CSS Framework with some modifi

A Travel App UI Built Using Vue 3 And Tailwind CSS
A Travel App UI Built Using Vue 3 And Tailwind CSS

Travel App Slicing project #05 About This is my projects to make UI using front end tech Where the ideas and the concept i use from any other designer

Basic and Simple Live Cricket Score site Build using Vue.js and Tailwind CSS

Live Cricket Score Basic and Simple Live Cricket Score site Build using Vue.js and Tailwind CSS This is an Demo and Sample site - Just clone or downlo

BlogIt - Built With Vue Tailwind, SCSS, css, json-server

BlogIt Built With Vue Tailwind, SCSS, css json-server Live Demo Live Demo Link Available Scripts In the project directory, you can: Run the app in the

📝📋Survey App is a simple web application built using Vue js, HTML, CSS, and JavaScript.
📝📋Survey App is a simple web application built using Vue js, HTML, CSS, and JavaScript.

survey 📝 Table of Contents About Description Project setup ScreenShots Contributors About Survey App is a simple web application built using Vue js,

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

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

Sparks bank App is a simple web application built using Vue js, HTML , CSS and firebase data base using fetch to get or post or delete data
Sparks bank App is a simple web application built using Vue js, HTML , CSS and firebase data base using fetch to get or post or delete data

spark-bank 📝 Table of Contents About Description Project setup ScreenShots Video Website link Contributors About sparks bank App is a simple web appl

🙇‍♂️ Instagram clone built with Vue 3, Tailwind CSS, TypeScript on Twitch livestream!
🙇‍♂️ Instagram clone built with Vue 3, Tailwind CSS, TypeScript on Twitch livestream!

Instagram Clone with Vue 3 Here's a not-so-little but also not-so-detailed Instagram clone app built with Vue 3, TypeScript, Tailwind CSS on Twitch! Y

Comments
  • Bump json5, jest and vue-jest

    Bump json5, jest and vue-jest

    Removes json5. It's no longer used after updating ancestor dependencies json5, jest and vue-jest. These dependencies need to be updated together.

    Removes json5

    Updates jest from 22.4.2 to 29.3.1

    Release notes

    Sourced from jest's releases.

    v29.3.1

    Fixes

    • [jest-config] Do not warn about preset in ProjectConfig #13583

    Performance

    • [jest-transform] Defer creation of cache directory #13420

    v29.3.0

    Features

    • [jest-runtime] Support WebAssembly (Wasm) imports in ESM modules (#13505)

    Fixes

    • [jest-config] Add config validation for projects option (#13565)
    • [jest-mock] Treat cjs modules as objects so they can be mocked (#13513)
    • [jest-worker] Throw an error instead of hanging when jest workers terminate unexpectedly (#13566)

    Chore & Maintenance

    • [@jest/transform] Update convert-source-map (#13509)
    • [docs] Mention toStrictEqual in UsingMatchers docs. (#13560)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v29.2.2...v29.3.0

    v29.2.2

    Fixes

    • [@jest/test-sequencer] Make sure sharding does not produce empty groups (#13476)
    • [jest-circus] Test marked as todo are shown as todo when inside a focussed describe (#13504)
    • [jest-mock] Ensure mock resolved and rejected values are promises from correct realm (#13503)
    • [jest-snapshot] Don't highlight passing asymmetric property matchers in snapshot diff (#13480)

    Chore & Maintenance

    • [docs] Update link to Jest 28 upgrade guide in error message (#13483)
    • [jest-runner, jest-watcher] Update emittery (#13490)

    New Contributors

    ... (truncated)

    Changelog

    Sourced from jest's changelog.

    29.3.1

    Fixes

    • [jest-config] Do not warn about preset in ProjectConfig (#13583)

    Performance

    • [jest-transform] Defer creation of cache directory (#13420)

    29.3.0

    Features

    • [jest-runtime] Support WebAssembly (Wasm) imports in ESM modules (#13505)

    Fixes

    • [jest-config] Add config validation for projects option (#13565)
    • [jest-mock] Treat cjs modules as objects so they can be mocked (#13513)
    • [jest-worker] Throw an error instead of hanging when jest workers terminate unexpectedly (#13566)

    Chore & Maintenance

    • [@jest/transform] Update convert-source-map (#13509)
    • [docs] Mention toStrictEqual in UsingMatchers docs. (#13560)

    29.2.2

    Fixes

    • [@jest/test-sequencer] Make sure sharding does not produce empty groups (#13476)
    • [jest-circus] Test marked as todo are shown as todo when inside a focussed describe (#13504)
    • [jest-mock] Ensure mock resolved and rejected values are promises from correct realm (#13503)
    • [jest-snapshot] Don't highlight passing asymmetric property matchers in snapshot diff (#13480)

    Chore & Maintenance

    • [docs] Update link to Jest 28 upgrade guide in error message (#13483)
    • [jest-runner, jest-watcher] Update emittery (#13490)

    29.2.1

    Features

    • [@jest/globals, jest-mock] Add jest.Spied* utility types (#13440)

    Fixes

    • [jest-environment-node] make globalThis.performance writable for Node 19 and fake timers (#13467)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by simenb, a new releaser for jest since your current version.


    Updates vue-jest from 2.1.1 to 4.0.1

    Release notes

    Sourced from vue-jest's releases.

    v4.0.1

    One minor fix.

    Fixes:

    v4.0.0

    The 4.0.0 is finally here. No clear blocker so transitioning this from release candidate to master. Better late than never.

    Fixes

    fix: add fallback to default TemplateCompileOptions #310 @​nogic1008

    v4.0.0-rc.1

    Features

    feat: pass templateCompiler options https://github.com/vuejs/vue-jest/commit/37efa5873661385c1a979838b23b72701650a132 feat: add-compile-template-options #288

    Fixes

    fix: external css files path resolution https://github.com/vuejs/vue-jest/commit/fe76473cb19a01cd417e4bff4ca1c22128625e37

    v4.0.0-rc.0

    Features

    We moved to release candidate after many months of beta with no real roadmap.

    We will move to 4.0.0 stable before the end of Sep 2020.

    v4.0.0-beta.6

    Fixes

    fix: remove inline source map @​nogic1008 build: bump jest version in peerDependencies @​nogic1008

    That's it! Small release.

    v4.0.0-beta.5

    Fixes

    v4.0.0-beta.4

    Features

    ... (truncated)

    Commits
    • e632171 Merge pull request #320 from catrope/typo-namepsace
    • 95784e4 Merge pull request #284 from vuejs/remove-ts-jest
    • 10559e1 chore: rebase
    • 6a7a728 Fix typo in processor example
    • 1fb3b2e publish: 4.0.0
    • 938a97e Merge pull request #311 from vuejs/dependabot/npm_and_yarn/ini-1.3.7
    • 1ada5fe Merge pull request #312 from vuejs/dependabot/npm_and_yarn/node-notifier-8.0.1
    • b393520 chore(deps): bump node-notifier from 8.0.0 to 8.0.1
    • 4ce4686 Merge pull request #310 from nogic1008/hotfix/template-compiler
    • 2353bd2 chore(deps): bump ini from 1.3.5 to 1.3.7
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by lmiller1990, a new releaser for vue-jest since your current version.


    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs

    Bump qs

    Bumps qs and qs. These dependencies needed to be updated together. Updates qs from 6.5.1 to 6.5.3

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main

    6.5.2

    • [Fix] use safer-buffer instead of Buffer constructor
    • [Refactor] utils: module.exports one thing, instead of mutating exports (#230)
    • [Dev Deps] update browserify, eslint, iconv-lite, safer-buffer, tape, browserify
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Updates qs from 6.4.0 to 6.5.3

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main

    6.5.2

    • [Fix] use safer-buffer instead of Buffer constructor
    • [Refactor] utils: module.exports one thing, instead of mutating exports (#230)
    • [Dev Deps] update browserify, eslint, iconv-lite, safer-buffer, tape, browserify
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    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.

    dependencies 
    opened by dependabot[bot] 0
Owner
Naohiro Nakajima
Frontend Engineer 🐾
Naohiro Nakajima
A Course Scheduling Helper Using Vue.js

CourseSchedulingHelper instance Environment Node >= 6 Start Clone or download this repository Enter your local directory, and install dependencies: np

cosformula 15 Dec 16, 2022
Creating .NET Core CRUD API's by just writing class files

Generate CRUD API with ODATA enabled by just writing class files First of all this is a really early Alpha, consider things with care. Currently it on

Tim Cadenbach 138 Dec 21, 2022
Use Grid-Awesome to generate boilerplate css for grid layouts using the css display: grid; property.

Grid Awesome Use Grid-Awesome to generate boilerplate css for grid layouts using the css display: grid; property. Demo Getting Started git clone https

Louis Bourque 24 Nov 27, 2022
Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Layoutit Grid CSS Grids layouts made easy! Layoutit grid is a CSS Grid layout generator. Quickly design web pages layouts with our clean editor, and g

Leniolabs_ 1.4k Dec 29, 2022
Vue directive to make a calculator input behavior. Implementation of https://github.com/BosNaufal/readable-number

Vue Calc Input A directive for Vue.Js to make an calculator input behavior. Implementation of readable-number.js DEMO Install Include the vue-calc-inp

Naufal Rabbani 4 Jun 5, 2021
📋 Vue2.0 directive to copy or cut text to clipboard.

vue-clipboards ?? Vue2.0 directive to copy or cut text to clipboard. DEMO: https://zhuowenli.github.io/vue-clipboards/ Install $ npm install vue-clipb

卓文理 205 Nov 2, 2022
Vue-pwa-ecommerce - A PWA e-commerce page, using Vue.js, Nuxt.js, Tailwind CSS & Snipcart

Vue PWA Organic Fruit Shop Intro The main goal was to create a Progressive Web A

Marta B. 21 Dec 8, 2022
Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

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

norhan reda 2 Oct 6, 2022
Pinterest clone built with tailwind.css and vue.js

vue-tailwind-template Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run

Stephanie Dietz 20 Jan 7, 2023
Twitter clone made with Vue.js and just pure css.

Twitter Clone with Vue.js ?? Twitter clone made with Vue.js, Vue Router, Vuex and Axios-mock-adapter(for fake REST API). Pure CSS One more feature Twe

Kaan Ersoy 21 Apr 26, 2022