Gathering detailed insights and metrics for vue-style-loader
Gathering detailed insights and metrics for vue-style-loader
Gathering detailed insights and metrics for vue-style-loader
Gathering detailed insights and metrics for vue-style-loader
npm install vue-style-loader
Typescript
Module System
Node Version
NPM Version
99
Supply Chain
79.5
Quality
77.9
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
572,496,307
Last Day
70,383
Last Week
1,489,986
Last Month
6,526,156
Last Year
79,163,622
MIT License
226 Stars
196 Commits
67 Forks
12 Watchers
2 Branches
72 Contributors
Updated on May 29, 2025
Minified
Minified + Gzipped
Latest Version
4.1.3
Package Id
vue-style-loader@4.1.3
Size
8.73 kB
NPM Version
6.14.11
Node Version
12.20.2
Published on
Mar 03, 2021
Cumulative downloads
Total Downloads
2
This is a fork based on style-loader. Similar to style-loader
, you can chain it after css-loader
to dynamically inject CSS into the document as style tags. However, since this is included as a dependency and used by default in vue-loader
, in most cases you don't need to configure this loader yourself.
manualInject (3.1.0+):
Type: boolean
. When importing the style from a non-vue-file, by default the style is injected as a side effect of the import. When manualInject
is true, the imported style object exposes a __inject__
method, which can then be called manually at appropriate timing. If called on the server, the method expects one argument which is the ssrContext
to attach styles to.
1import styles from 'styles.scss' 2 3export default { 4 beforeCreate() { // or create a mixin for this purpose 5 if(styles.__inject__) { 6 styles.__inject__(this.$ssrContext) 7 } 8 } 9 10 render() { 11 return <div class={styles.heading}>Hello World</div> 12 } 13}
Note this behavior is enabled automatically when vue-style-loader
is used on styles imported within a *.vue
file. The option is only exposed for advanced usage.
ssrId (3.1.0+):
Type: boolean
. Add data-vue-ssr-id
attribute to injected <style>
tags even when not in Node.js. This can be used with pre-rendering (instead of SSR) to avoid duplicate style injection on hydration.
style-loader
When bundling with target: 'node'
, the styles in all rendered components are collected and exposed on the Vue render context object as context.styles
, which you can simply inline into your markup's <head>
. If you are building a Vue SSR app, you probably should use this loader for CSS imported from JavaScript files too.
Does not support url mode and reference counting mode. Also removed singleton
and insertAt
query options. It always automatically pick the style insertion mechanism that makes most sense. If you need these capabilities you should probably use the original style-loader
instead.
Fixed the issue that root-relative URLs are interpreted against chrome:// urls and make source map URLs work for injected <style>
tags in Chrome.
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 8/30 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
73 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
-22%
70,383
Compared to previous day
Last Week
-12.8%
1,489,986
Compared to previous week
Last Month
-2.2%
6,526,156
Compared to previous month
Last Year
-13%
79,163,622
Compared to previous year