{"bugs":{"url":"https://github.com/nuxt/components/issues"},"dist":{"shasum":"aed202beb6d018b0d051f75420365a5e7b8b86d5","tarball":"https://registry.npmjs.org/@nuxt/components/-/components-2.2.0-0.tgz","fileCount":14,"integrity":"sha512-vQKeDUuOFYwGrM0J+I4cSIQqmXmD1u1sJFJoJXzoD12jztVN+73A2p4OLfSlNmd1y6Li8lDshTgmRPs1+80kcA==","signatures":[{"sig":"MEUCIQDRhUK50znQ91WlRc/9EWqGUeMTgMTkTo8SQETHJOjdPQIgaW8k1hql8J/DBdCuKBFOCIJ0kr7wwQygFllz9OLDG44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE8EaCRA9TVsSAnZWagAAW7QP/AljD6byjRO/feYH9do4\nACtDc7G70z1aHu0mJCgpyXem/+mEPANrYkCvn+fsJUlnlkb6XSTYDxY3E/Kj\nvbQ5YV49/Dq3eV+AvK5l6n2k03Pk0Mlj2eF+ykZVFWo+sbMen71G+45UM1wI\nRArviLGsu9hm1FC4auDwCLpDkR2YWQ/iNV0Llt3rNkjWLYgcm9xGd9cYkXCH\nzYnYwlb3I6dhmmF3fqXq/yeXMF7Jxk3lbX4B4ID2dipRZugrHhnpzAg3pUYr\nog8HkJGsukI0ytZbDdR+ytVFkxNg0I/9H8PnNp3BddlWaX/bdQi2LJQCXL8p\nwbwJTU1iKFeVFdrUY8Bzy4eKpd1go3iiCNXdF7A/dOltDY3Ou5DjT7eMQWdq\ndKh2GDD/BHZWXsW4Ow9xfkwS+IpAIB98+G88wc0+am/gJT+MIZoX54mnlUYl\n5iSyRRQSv/yCkMyXbioenfTle/uBzSNdYRC941oQyRzKt4+XruQe/cd+iI9Q\n+swqogEIdTbqXSxHAzwltPMg8NzAP9PDCQ7fA0Me9s//KowI3FjBEy0qm3Di\nypwAMik366ys66dBxFH9zG6INBmVqhOqVw8jF5Z49kgcLSygiucEZ2/zTPYB\n0UxPBjQSaviCfCUcNaqLbfiOZfLRn2mDd4+YGwD68a7kv/NasDQNgcqNFszj\nZdDR\r\n=3Xzx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@nuxt/components","types":"dist/index.d.ts","readme":"![@nuxt/components](https://user-images.githubusercontent.com/904724/99790294-2f75d300-2b24-11eb-8114-0a2569913fae.png)\n\n# @nuxt/components\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\n> Module to scan and auto import components for Nuxt 2.13+\n\n- [🎲&nbsp; Play on CodeSandbox](https://githubbox.com/nuxt/components/tree/master/example)\n- [🎬&nbsp; Demonstration video (49s)](https://www.youtube.com/watch?v=lQ8OBrgVVr8)\n- [📖&nbsp; Release Notes](./CHANGELOG.md)\n\n## Table of Contents\n\n- [Features](#features)\n- [Usage](#usage)\n- [Lazy Imports](#lazy-imports)\n- [Overwriting Components](#overwriting-components)\n- [Directories](#directories)\n- [Directory Properties](#directory-properties)\n- [Library authors](#library-authors)\n- [License](#license)\n\n## Features\n\n- Automatically scan `components/` directory\n- No need to manually import components anymore\n- Multiple paths with customizable prefixes and lookup/ignore patterns\n- Lazy loading (Async components)\n- Production code-splitting optimization (loader)\n- Hot reloading\n- Module integration ([library authors](#library-authors))\n- Fully tested\n\n## Usage\n\nSet the `components` option in `nuxt.config`:\n\n```js\nexport default {\n  components: true\n}\n```\n\n**Note:** If using nuxt `2.10...2.13`, you have to also manually install and add `@nuxt/components` to `buildModules` inside `nuxt.config`.\n\n**Create your components:**\n\n```bash\n| components/\n---| ComponentFoo.vue\n---| ComponentBar.vue\n```\n\n**Use them whenever you want, they will be auto imported in `.vue` files :**\n\n```html\n<template>\n  <ComponentFoo />\n  <component-bar />\n</template>\n```\n\nNo need anymore to manually import them in the `script` section!\n\nSee [live demo](https://codesandbox.io/s/nuxt-components-cou9k) or [video example](https://www.youtube.com/watch?v=lQ8OBrgVVr8).\n\n### Lazy Imports\n\nNuxt by default does code-splitting per page and components. But sometimes we also need to lazy load them:\n\n- Component size is rather big (or has big dependencies imported) like a text-editor\n- Component is rendered conditionally with `v-if` or being in a modal\n\nIn order to [lazy load](https://webpack.js.org/guides/lazy-loading/) a component, all we need to do is to add `Lazy` prefix to component name.\n\nYou now can easily import a component on-demand:\n\n```html\n<template>\n  <LazyComponentFoo v-if=\"foo\" />\n  <button @click=\"loadFoo\">\n    Load Foo\n  </button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        foo: null\n      }\n    },\n    methods: {\n      async loadFoo() {\n        this.foo = await this.$axios.$get('foo')\n      }\n    }\n  }\n</script>\n```\n\nIf you want to prefetch or preload the components with `Lazy` prefix, you can configure it by [prefetch/preload options](#prefetch/preload).\n\n### Nested Components\n\nIf you have components in nested directories:\n\n```bash\n| components/\n---| my/\n------| form/\n---------| TextArea.vue\n```\n\nThe component name will contain its path:\n\n```html\n<MyFormTextArea />\n```\n\nFor clarity, it is recommended that component file name matches its name. You can also use `MyFormTextArea.vue` as name with same directory structure.\n\nIf for any reason different prefix is desired, we can add specific directory with the `prefix` option: (See [directories](#directories) section)\n\n```js\ncomponents: ['~/components/', { path: '~/components/foo/', prefix: 'foo' }]\n```\n\n## Overwriting Components\n\nIt is possible to have a way to overwrite components using the [level](#level) option. This is very useful for modules and theme authors.\n\nConsidering this structure:\n\n```bash\n| node_modules/\n---| my-theme/\n------| components/\n---------| Header.vue\n| components/\n---| Header.vue\n```\n\nThen defining in the `nuxt.config`:\n\n```js\ncomponents: [\n  '~/components', // default level is 0\n  { path: 'node_modules/my-theme/components', level: 1 }\n]\n```\n\nOur `components/Header.vue` will overwrite our theme component since the lowest level overwrites.\n\n## Directories\n\nBy setting `components: true`, default `~/components` directory will be included.\nHowever you can customize module behaviour by providing directories to scan:\n\n```js\nexport default {\n  components: [\n    '~/components', // shortcut to { path: '~/components' }\n    { path: '~/components/awesome/', prefix: 'awesome' }\n  ]\n}\n```\n\nEach item can be either string or object. String is shortcut to `{ path }`.\n\n**Note:** Don't worry about ordering or overlapping directories! Components module will take care of it. Each file will be only matched once with longest path.\n\n### Directory Properties\n\n#### path\n\n- Required\n- Type: `String`\n\nPath (absolute or relative) to the directory containing your components.\n\nYou can use Nuxt aliases (`~` or `@`) to refer to directories inside project or directly use a npm package path similar to require.\n\n#### extensions\n\n- Type: `Array<string>`\n- Default:\n  - Extensions supported by Nuxt builder (`builder.supportedExtensions`)\n  - Default supported extensions `['vue', 'js']` or `['vue', 'js', 'ts', 'tsx']` depending on your environment\n\n**Example:** Support multi-file component structure\n\nIf you prefer to split your SFCs into `.js`, `.vue` and `.css`, you can only enable `.vue` files to be scanned:\n\n```\n| components\n---| componentC\n------| componentC.vue\n------| componentC.js\n------| componentC.scss\n```\n\n```js\n// nuxt.config.js\nexport default {\n  components: [{ path: '~/components', extensions: ['vue'] }]\n}\n```\n\n#### pattern\n\n- Type: `string` ([glob pattern](https://github.com/isaacs/node-glob#glob-primer))\n- Default: `**/*.${extensions.join(',')}`\n\nAccept Pattern that will be run against specified `path`.\n\n#### ignore\n\n- Type: `Array`\n- Items: `string` ([glob pattern](https://github.com/isaacs/node-glob#glob-primer))\n- Default: `[]`\n\nIgnore patterns that will be run against specified `path`.\n\n#### prefix\n\n- Type: `String`\n- Default: `''` (no prefix)\n\nPrefix all matched components.\n\nExample below adds `awesome-`/`Awesome` prefix to the name of components in `awesome/` directory.\n\n```js\n// nuxt.config.js\nexport default {\n  components: [\n    '~/components',\n    { path: '~/components/awesome/', prefix: 'awesome' }\n  ]\n}\n```\n\n```bash\ncomponents/\n  awesome/\n    Button.vue\n  Button.vue\n```\n\n```html\n<template>\n  <div>\n    <AwesomeButton>Click on me 🤘</AwesomeButton>\n    <button>Click on me</button>\n  </div>\n</template>\n```\n\n#### pathPrefix\n\n- Type: `Boolean`\n- Default: `true`\n\nPrefix component name by it's path\n\n#### watch\n\n- Type: `Boolean`\n- Default: `true`\n\nWatch specified `path` for changes, including file additions and file deletions.\n\n#### transpile\n\n- Type: `Boolean`\n- Default: `'auto'`\n\nTranspile specified `path` using [`build.transpile`](https://nuxtjs.org/api/configuration-build#transpile), by default (`'auto'`) it will set `transpile: true` if `node_modules/` is in `path`.\n\n#### level\n\n- Type: `Number`\n- Default: `0`\n\nLevel are use to define a hint when overwriting the components which have the same name in two different directories, this is useful for theming.\n\n```js\nexport default {\n  components: [\n    '~/components', // default level is 0\n    { path: 'my-theme/components', level: 1 }\n  ]\n}\n```\n\nComponents having the same name in `~/components` will overwrite the one in `my-theme/components`, learn more in [Overwriting Components](#overwriting-components). The lowest value will overwrite.\n\n#### prefetch/preload\n\n- Type: `Boolean/Number`\n- Default: `false`\n\nThese properties are used in production to configure how [components with `Lazy` prefix](#Lazy-Imports) are handled by Wepack via its magic comments, learn more in [Wepack's official documentation](https://webpack.js.org/api/module-methods/#magic-comments).\n\n```js\nexport default {\n  components: [{ path: 'my-theme/components', prefetch: true }]\n}\n```\n\nyields:\n\n```js\n// plugin.js\nconst componets = {\n  MyComponentA: import(/* webpackPrefetch: true */ ...),\n  MyComponentB: import(/* webpackPrefetch: true */ ...)\n}\n```\n\n#### isAsync\n\n- Type: Boolean\n- Default: `false` unless component name ends with `.async.vue`\n\nThis flag indicates, component should be loaded async (with a seperate chunk) regardless of using `Lazy` prefix or not.\n\n## Migration guide\n\n## `v1` to `v2`\n\nStarting with `nuxt@2.15`, Nuxt uses `@nuxt/components` v2:\n\n- All components are globally available so you can move `components/global/`\n  to `components/` and `global: true` is not required anymore\n- Full path inside `components` is used to prefix component names. If you were structing your\n  components in multiple directories, should either add prefix or register in `components` section of `nuxt.config` or use new `pathPrefix` option.\n\n**Example:**\n\n```\ncomponents\n├── atoms\n│   └── icons\n├── molecules\n│   └── illustrations\n├── organisms\n│   └── ads\n└── templates\n    ├── blog\n    └── home\n```\n\n```js\n// nuxt.config.js\nexport default {\n  components: [\n    '~/components/templates',\n    '~/components/atoms',\n    '~/components/molecules',\n    '~/components/organisms'\n  ]\n}\n```\n\n## Library Authors\n\nMaking Vue Component libraries with automatic tree-shaking and component registration is now damn easy ✨\n\nThis module expose a hook named `components:dirs` so you can easily extend the directory list without updating user configuration in your Nuxt module.\n\nImagine a directory structure like this:\n\n```bash\n| node_modules/\n---| awesome-ui/\n------| components/\n---------| Alert.vue\n---------| Button.vue\n------| nuxt.js\n| pages/\n---| index.vue\n| nuxt.config.js\n```\n\nThen in `awesome-ui/nuxt.js` you can use the `components:dir` hook:\n\n```js\nimport { join } from 'path'\n\nexport default function() {\n  this.nuxt.hook('components:dirs', dirs => {\n    // Add ./components dir to the list\n    dirs.push({\n      path: join(__dirname, 'components'),\n      prefix: 'awesome'\n    })\n  })\n}\n```\n\nThat's it! Now in your project, you can import your ui library as a Nuxt module in your `nuxt.config.js`:\n\n```js\nexport default {\n  buildModules: ['@nuxt/components', 'awesome-ui/nuxt']\n}\n```\n\nAnd directly use the module components (prefixed with `awesome-`), our `pages/index.vue`:\n\n```vue\n<template>\n  <div>\n    My <AwesomeButton>UI button</AwesomeButton>!\n    <awesome-alert>Here's an alert!</awesome-alert>\n  </div>\n</template>\n```\n\nIt will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.\n\nNext: publish your `awesome-ui` module to [npm](https://www.npmjs.com) and share it with the other Nuxters ✨\n\n## License\n\n[MIT](./LICENSE)\n\n<!-- Badges -->\n\n[npm-version-src]: https://img.shields.io/npm/v/@nuxt/components/latest.svg?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@nuxt/components\n[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxt/components.svg?style=flat-square\n[npm-downloads-href]: https://npmjs.com/package/@nuxt/components\n[github-actions-ci-src]: https://img.shields.io/github/workflow/status/nuxt/typescript/test?label=ci&style=flat-square\n[github-actions-ci-href]: https://github.com/nuxt/components/actions?query=workflow%3Aci\n[codecov-src]: https://img.shields.io/codecov/c/github/nuxt/components.svg?style=flat-square\n[codecov-href]: https://codecov.io/gh/nuxt/components\n[license-src]: https://img.shields.io/npm/l/@nuxt/components.svg?style=flat-square\n[license-href]: https://npmjs.com/package/@nuxt/components\n","exports":{".":"./dist/index.js","./*":"./*","./loader":"./dist/loader.js","./package.json":"./package.json"},"gitHead":"ddb9ae47d6835e8f8edc95f6aec2d36189069f8b","license":"MIT","scripts":{"dev":"nuxt dev test/fixture","lint":"eslint --ext .ts,.js,.vue .","test":"yarn lint && jest --verbose","build":"siroc build","prepare":"yarn link && yarn link @nuxt/components","release":"yarn test && standard-version && git push --follow-tags && npm publish","prepublishOnly":"yarn build"},"_npmUser":{"name":"pi0","email":"pyapar@gmail.com"},"homepage":"https://github.com/nuxt/components#readme","deprecated":"@nuxt/components was built for Nuxt 2, which has reached EOL. Nuxt 3+ auto-imports components out of the box.","repository":{"url":"git+https://github.com/nuxt/components.git","type":"git"},"_npmVersion":"6.14.13","description":"Auto Import Components for Nuxt.js","directories":{},"maintainers":[{"name":"atinux","email":"atinux@gmail.com"},{"name":"pi0","email":"pyapar@gmail.com"},{"name":"clarkdo","email":"clark.duxin@gmail.com"},{"name":"danielroe","email":"daniel@roe.dev"},{"name":"kevinmarrec","email":"kevin@marrec.io"}],"_nodeVersion":"14.17.3","dependencies":{"glob":"^7.1.7","chalk":"^4.1.2","scule":"^0.2.1","upath":"^2.0.1","globby":"^11.0.4","semver":"^7.3.5","chokidar":"^3.5.2","vue-template-compiler":"^2.6.14"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"pug":"latest","jest":"latest","siroc":"0.15.0","eslint":"latest","consola":"latest","nuxt-edge":"latest","@nuxt/types":"latest","@types/jest":"latest","loader-utils":"latest","@types/lodash":"latest","@types/semver":"latest","@nuxt/test-utils":"latest","pug-plain-loader":"latest","standard-version":"latest","@babel/preset-env":"latest","@types/loader-utils":"latest","@nuxt/typescript-build":"latest","@babel/preset-typescript":"latest","@nuxt/typescript-runtime":"latest","@nuxtjs/eslint-config-typescript":"latest"},"peerDependencies":{"consola":"*"},"_npmOperationalInternal":{"tmp":"tmp/components_2.2.0-0_1628684570333_0.6487994014634928","host":"s3://npm-registry-packages"},"_id":"@nuxt/components@2.2.0-0","version":"2.2.0-0"}