# vue-picocss

> PicoCSS for Vue

Latest version **0.2.7** (published 2023-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-picocss
pnpm add vue-picocss
yarn add vue-picocss
bun add vue-picocss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2023-06-07 |
| First published | 2023-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 217 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | ow-carriera |
| Maintainers | pow-carreira |
| Keywords | css, css-framework, dark-mode, dark-theme, lightweight, minimal, minimalist, minimalistic, native-html, scss-framework, semantic, vuejs, vue |

## Links

- npm: https://www.npmjs.com/package/vue-picocss
- Repository: https://github.com/pow-carriera/vue-picocss
- Homepage: https://picocss.com
- Issues: https://github.com/picocss/pico/issues
- npm.io page: https://npm.io/package/vue-picocss

## Dependencies (217)

- [he](https://npm.io/package/he.md) ^1.2.0
- [ms](https://npm.io/package/ms.md) ^2.1.2
- [has](https://npm.io/package/has.md) ^1.0.3
- [glob](https://npm.io/package/glob.md) ^7.2.3
- [nopt](https://npm.io/package/nopt.md) ^1.0.10
- [once](https://npm.io/package/once.md) ^1.4.0
- [pify](https://npm.io/package/pify.md) ^4.0.1
- [y18n](https://npm.io/package/y18n.md) ^5.0.8
- [yaml](https://npm.io/package/yaml.md) ^2.1.1
- [chalk](https://npm.io/package/chalk.md) ^2.4.2
- [cliui](https://npm.io/package/cliui.md) ^7.0.4
- [debug](https://npm.io/package/debug.md) ^4.3.4
- [fastq](https://npm.io/package/fastq.md) ^1.13.0
- [isexe](https://npm.io/package/isexe.md) ^2.0.0
- [jsesc](https://npm.io/package/jsesc.md) ^2.5.2
- [json5](https://npm.io/package/json5.md) ^2.2.3
- [slash](https://npm.io/package/slash.md) ^2.0.0
- [touch](https://npm.io/package/touch.md) ^3.1.0
- [which](https://npm.io/package/which.md) ^1.3.1
- [yargs](https://npm.io/package/yargs.md) ^17.5.1
- [abbrev](https://npm.io/package/abbrev.md) ^1.1.1
- [big.js](https://npm.io/package/big.js.md) ^5.2.2
- [braces](https://npm.io/package/braces.md) ^3.0.2
- [globby](https://npm.io/package/globby.md) ^13.1.2
- [ignore](https://npm.io/package/ignore.md) ^5.2.0
- [merge2](https://npm.io/package/merge2.md) ^1.4.1
- [nanoid](https://npm.io/package/nanoid.md) ^3.3.6
- [recast](https://npm.io/package/recast.md) ^0.11.23
- [semver](https://npm.io/package/semver.md) ^6.3.0
- [thenby](https://npm.io/package/thenby.md) ^1.3.4
- [wrappy](https://npm.io/package/wrappy.md) ^1.0.2
- [esprima](https://npm.io/package/esprima.md) ^3.1.3
- [esutils](https://npm.io/package/esutils.md) ^2.0.3
- [gensync](https://npm.io/package/gensync.md) ^1.0.0-beta.2
- [globals](https://npm.io/package/globals.md) ^11.12.0
- [is-glob](https://npm.io/package/is-glob.md) ^4.0.3
- [no-case](https://npm.io/package/no-case.md) ^2.3.2
- [pidtree](https://npm.io/package/pidtree.md) ^0.3.1
- [private](https://npm.io/package/private.md) ^0.1.8
- [rechoir](https://npm.io/package/rechoir.md) ^0.6.2
- [resolve](https://npm.io/package/resolve.md) ^1.22.0
- [reusify](https://npm.io/package/reusify.md) ^1.0.4
- [shelljs](https://npm.io/package/shelljs.md) ^0.8.5
- [through](https://npm.io/package/through.md) ^2.3.8
- [typical](https://npm.io/package/typical.md) ^4.0.0
- [yallist](https://npm.io/package/yallist.md) ^3.1.1
- [anymatch](https://npm.io/package/anymatch.md) ^3.1.2
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [dir-glob](https://npm.io/package/dir-glob.md) ^3.0.1
- [error-ex](https://npm.io/package/error-ex.md) ^1.3.2
- [escalade](https://npm.io/package/escalade.md) ^3.1.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.1
- [has-flag](https://npm.io/package/has-flag.md) ^3.0.0
- [inflight](https://npm.io/package/inflight.md) ^1.0.6
- [inherits](https://npm.io/package/inherits.md) ^2.0.4
- [is-regex](https://npm.io/package/is-regex.md) ^1.1.4
- [jsonfile](https://npm.io/package/jsonfile.md) ^4.0.0
- [make-dir](https://npm.io/package/make-dir.md) ^2.1.0
- [minimist](https://npm.io/package/minimist.md) ^1.2.6
- [nice-try](https://npm.io/package/nice-try.md) ^1.0.5
- [path-key](https://npm.io/package/path-key.md) ^2.0.1
- [read-pkg](https://npm.io/package/read-pkg.md) ^3.0.0
- [readdirp](https://npm.io/package/readdirp.md) ^3.6.0
- [ast-types](https://npm.io/package/ast-types.md) ^0.9.6
- [call-bind](https://npm.io/package/call-bind.md) ^1.0.2
- [clean-css](https://npm.io/package/clean-css.md) ^5.3.2
- [commander](https://npm.io/package/commander.md) ^4.1.1
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.2.12
- [fastparse](https://npm.io/package/fastparse.md) ^1.1.2
- [get-stdin](https://npm.io/package/get-stdin.md) ^9.0.0
- [immutable](https://npm.io/package/immutable.md) ^4.0.0
- [interpret](https://npm.io/package/interpret.md) ^1.4.0
- [is-bigint](https://npm.io/package/is-bigint.md) ^1.0.4
- [is-number](https://npm.io/package/is-number.md) ^7.0.0
- [is-string](https://npm.io/package/is-string.md) ^1.0.7
- [is-symbol](https://npm.io/package/is-symbol.md) ^1.0.4
- [js-tokens](https://npm.io/package/js-tokens.md) ^4.0.0
- [lilconfig](https://npm.io/package/lilconfig.md) ^2.0.6
- [lru-cache](https://npm.io/package/lru-cache.md) ^5.1.1
- [minimatch](https://npm.io/package/minimatch.md) ^3.1.2
- [path-type](https://npm.io/package/path-type.md) ^4.0.0
- [picomatch](https://npm.io/package/picomatch.md) ^2.3.1
- [relateurl](https://npm.io/package/relateurl.md) ^0.2.7
- [strip-bom](https://npm.io/package/strip-bom.md) ^3.0.0
- [undefsafe](https://npm.io/package/undefsafe.md) ^2.0.5
- [wrap-ansi](https://npm.io/package/wrap-ansi.md) ^7.0.0
- [ansi-regex](https://npm.io/package/ansi-regex.md) ^5.0.1
- [array-back](https://npm.io/package/array-back.md) ^3.1.0
- [camel-case](https://npm.io/package/camel-case.md) ^3.0.0
- [color-name](https://npm.io/package/color-name.md) ^1.1.3
- [concat-map](https://npm.io/package/concat-map.md) ^0.0.1
- [fill-range](https://npm.io/package/fill-range.md) ^7.0.1
- [is-extglob](https://npm.io/package/is-extglob.md) ^2.1.1
- [is-weakref](https://npm.io/package/is-weakref.md) ^1.0.2
- [lower-case](https://npm.io/package/lower-case.md) ^1.1.4
- [micromatch](https://npm.io/package/micromatch.md) ^4.0.5
- [node-watch](https://npm.io/package/node-watch.md) ^0.6.4
- [param-case](https://npm.io/package/param-case.md) ^2.1.1
- [parse-json](https://npm.io/package/parse-json.md) ^4.0.0
- [path-parse](https://npm.io/package/path-parse.md) ^1.0.7
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0
- [read-cache](https://npm.io/package/read-cache.md) ^1.0.0
- [regenerate](https://npm.io/package/regenerate.md) ^1.4.2
- [source-map](https://npm.io/package/source-map.md) ^0.6.1
- [strip-ansi](https://npm.io/package/strip-ansi.md) ^6.0.1
- [upper-case](https://npm.io/package/upper-case.md) ^1.1.3
- [ansi-styles](https://npm.io/package/ansi-styles.md) ^3.2.1
- [cross-spawn](https://npm.io/package/cross-spawn.md) ^6.0.5
- [emoji-regex](https://npm.io/package/emoji-regex.md) ^8.0.0
- [emojis-list](https://npm.io/package/emojis-list.md) ^3.0.0
- [es-abstract](https://npm.io/package/es-abstract.md) ^1.20.1
- [fraction.js](https://npm.io/package/fraction.js.md) ^4.2.0
- [fs.realpath](https://npm.io/package/fs.realpath.md) ^1.0.0
- [glob-parent](https://npm.io/package/glob-parent.md) ^5.1.2
- [graceful-fs](https://npm.io/package/graceful-fs.md) ^4.2.10
- [has-bigints](https://npm.io/package/has-bigints.md) ^1.0.2
- [has-symbols](https://npm.io/package/has-symbols.md) ^1.0.3
- [html-loader](https://npm.io/package/html-loader.md) ^0.5.5
- [is-arrayish](https://npm.io/package/is-arrayish.md) ^0.2.1
- [is-callable](https://npm.io/package/is-callable.md) ^1.2.4
- [object-keys](https://npm.io/package/object-keys.md) ^1.1.1
- [pstree.remy](https://npm.io/package/pstree.remy.md) ^1.1.8
- [regjsparser](https://npm.io/package/regjsparser.md) ^0.9.1
- [safe-buffer](https://npm.io/package/safe-buffer.md) ^5.1.2
- [shell-quote](https://npm.io/package/shell-quote.md) ^1.7.3
- [browserslist](https://npm.io/package/browserslist.md) ^4.21.5
- [find-replace](https://npm.io/package/find-replace.md) ^3.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.4.2
- [memorystream](https://npm.io/package/memorystream.md) ^0.3.1
- [regexpu-core](https://npm.io/package/regexpu-core.md) ^5.3.2
- [run-parallel](https://npm.io/package/run-parallel.md) ^1.2.0
- [side-channel](https://npm.io/package/side-channel.md) ^1.0.4
- [spdx-correct](https://npm.io/package/spdx-correct.md) ^3.1.1
- [string-width](https://npm.io/package/string-width.md) ^4.2.3
- [universalify](https://npm.io/package/universalify.md) ^0.1.2
- [yargs-parser](https://npm.io/package/yargs-parser.md) ^21.0.1
- [color-convert](https://npm.io/package/color-convert.md) ^1.9.3
- [es6-templates](https://npm.io/package/es6-templates.md) ^0.2.3
- [function-bind](https://npm.io/package/function-bind.md) ^1.1.1
- [get-intrinsic](https://npm.io/package/get-intrinsic.md) ^1.1.1
- [html-minifier](https://npm.io/package/html-minifier.md) ^4.0.0
- [internal-slot](https://npm.io/package/internal-slot.md) ^1.0.3
- [node-releases](https://npm.io/package/node-releases.md) ^2.0.10
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [object.assign](https://npm.io/package/object.assign.md) ^4.1.2
- [pretty-hrtime](https://npm.io/package/pretty-hrtime.md) ^1.0.3
- [shebang-regex](https://npm.io/package/shebang-regex.md) ^1.0.0
- [source-map-js](https://npm.io/package/source-map-js.md) ^1.0.2
- [balanced-match](https://npm.io/package/balanced-match.md) ^1.0.2
- [core-js-compat](https://npm.io/package/core-js-compat.md) ^3.25.3
- [is-binary-path](https://npm.io/package/is-binary-path.md) ^2.1.0
- [is-core-module](https://npm.io/package/is-core-module.md) ^2.9.0
- [is-date-object](https://npm.io/package/is-date-object.md) ^1.0.5
- [load-json-file](https://npm.io/package/load-json-file.md) ^4.0.0
- [normalize-path](https://npm.io/package/normalize-path.md) ^3.0.0
- [object-inspect](https://npm.io/package/object-inspect.md) ^1.12.0
- [supports-color](https://npm.io/package/supports-color.md) ^5.5.0
- [to-regex-range](https://npm.io/package/to-regex-range.md) ^5.0.1
- [brace-expansion](https://npm.io/package/brace-expansion.md) ^1.1.11
- [es-to-primitive](https://npm.io/package/es-to-primitive.md) ^1.2.1
- [get-caller-file](https://npm.io/package/get-caller-file.md) ^2.0.5
- [has-tostringtag](https://npm.io/package/has-tostringtag.md) ^1.0.0
- [hosted-git-info](https://npm.io/package/hosted-git-info.md) ^2.8.9
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [normalize-range](https://npm.io/package/normalize-range.md) ^0.1.2
- [queue-microtask](https://npm.io/package/queue-microtask.md) ^1.2.3
- [shebang-command](https://npm.io/package/shebang-command.md) ^1.2.0
- [spdx-exceptions](https://npm.io/package/spdx-exceptions.md) ^2.3.0
- [unbox-primitive](https://npm.io/package/unbox-primitive.md) ^1.0.2
- [dependency-graph](https://npm.io/package/dependency-graph.md) ^0.11.0
- [is-negative-zero](https://npm.io/package/is-negative-zero.md) ^2.0.2
- [is-number-object](https://npm.io/package/is-number-object.md) ^1.0.7
- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0
- [path-is-absolute](https://npm.io/package/path-is-absolute.md) ^1.0.1
- [postcss-reporter](https://npm.io/package/postcss-reporter.md) ^7.0.5
- [spdx-license-ids](https://npm.io/package/spdx-license-ids.md) ^3.0.11
- [binary-extensions](https://npm.io/package/binary-extensions.md) ^2.2.0
- [command-line-args](https://npm.io/package/command-line-args.md) ^5.2.1
- [define-properties](https://npm.io/package/define-properties.md) ^1.1.4
- [ignore-by-default](https://npm.io/package/ignore-by-default.md) ^1.0.1
- [is-boolean-object](https://npm.io/package/is-boolean-object.md) ^1.1.2
- [require-directory](https://npm.io/package/require-directory.md) ^2.1.1
- [convert-source-map](https://npm.io/package/convert-source-map.md) ^1.8.0
- [to-fast-properties](https://npm.io/package/to-fast-properties.md) ^2.0.0
- [postcss-load-config](https://npm.io/package/postcss-load-config.md) ^4.0.1
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.11
- [electron-to-chromium](https://npm.io/package/electron-to-chromium.md) ^1.4.356
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^1.0.5
- [fs-readdir-recursive](https://npm.io/package/fs-readdir-recursive.md) ^1.1.0
- [functions-have-names](https://npm.io/package/functions-have-names.md) ^1.2.3
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0
- [regenerator-transform](https://npm.io/package/regenerator-transform.md) ^0.15.1
- [spdx-expression-parse](https://npm.io/package/spdx-expression-parse.md) ^3.0.1
- [which-boxed-primitive](https://npm.io/package/which-boxed-primitive.md) ^1.0.2
- [get-symbol-description](https://npm.io/package/get-symbol-description.md) ^1.0.0
- [is-shared-array-buffer](https://npm.io/package/is-shared-array-buffer.md) ^1.0.2
- [normalize-package-data](https://npm.io/package/normalize-package-data.md) ^2.5.0
- [regexp.prototype.flags](https://npm.io/package/regexp.prototype.flags.md) ^1.4.3
- [simple-update-notifier](https://npm.io/package/simple-update-notifier.md) ^1.0.7
- [update-browserslist-db](https://npm.io/package/update-browserslist-db.md) ^1.0.10
- [function.prototype.name](https://npm.io/package/function.prototype.name.md) ^1.1.5
- [is-fullwidth-code-point](https://npm.io/package/is-fullwidth-code-point.md) ^3.0.0
- [string.prototype.padend](https://npm.io/package/string.prototype.padend.md) ^3.1.3
- [has-property-descriptors](https://npm.io/package/has-property-descriptors.md) ^1.0.0
- [json-parse-better-errors](https://npm.io/package/json-parse-better-errors.md) ^1.0.2
- [string.prototype.trimend](https://npm.io/package/string.prototype.trimend.md) ^1.0.5
- [string.prototype.trimstart](https://npm.io/package/string.prototype.trimstart.md) ^1.0.5
- [validate-npm-package-license](https://npm.io/package/validate-npm-package-license.md) ^3.0.4
- [babel-plugin-polyfill-corejs2](https://npm.io/package/babel-plugin-polyfill-corejs2.md) ^0.3.3
- [babel-plugin-polyfill-corejs3](https://npm.io/package/babel-plugin-polyfill-corejs3.md) ^0.6.0
- [regenerate-unicode-properties](https://npm.io/package/regenerate-unicode-properties.md) ^10.1.0
- [supports-preserve-symlinks-flag](https://npm.io/package/supports-preserve-symlinks-flag.md) ^1.0.0
- [babel-plugin-polyfill-regenerator](https://npm.io/package/babel-plugin-polyfill-regenerator.md) ^0.4.1
- [unicode-match-property-ecmascript](https://npm.io/package/unicode-match-property-ecmascript.md) ^2.0.0
- [unicode-property-aliases-ecmascript](https://npm.io/package/unicode-property-aliases-ecmascript.md) ^2.1.0
- [unicode-match-property-value-ecmascript](https://npm.io/package/unicode-match-property-value-ecmascript.md) ^2.1.0
- [unicode-canonical-property-names-ecmascript](https://npm.io/package/unicode-canonical-property-names-ecmascript.md) ^2.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.2.7 (latest) — 2023-06-07
- 0.2.4 — 2023-06-07
- 0.2.3 — 2023-06-07
- 0.2.1 — 2023-06-07
- 0.2.0 — 2023-06-07

## README

<p align="center">
  <a href="https://picocss.com/">
    <img src=".github/logo.svg" width="64" height="64">
  </a>
    <a href="https://vuejs.org/">
    <img src=".github/vue-logo.svg" width="64" height="64">
  </a>
</p>

<h3 align="center">Vue - Pico CSS</h3>

<p align="center">
  <strong>PicoCSS but in Vue.js</strong><br>
  <a href="https://picocss.com/#examples">Examples</a> ·
  <a href="https://picocss.com/docs/">Documentation</a>
</p>

## Set Up Vue PicoCSS


To setup PicoCSS on Vue, install it via `npm install vue-picocss`.

Lastly, replace the line `import './assets/main.css'` with `import "vue-picocss/css/pico.min.css"` on your `main.[ts,js]` file.

---
_Source: https://npm.io/package/vue-picocss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._