Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@nuxt/components
Advanced tools
@nuxt/components is a Nuxt.js module that automatically imports your components, making it easier to manage and use components in your Nuxt.js applications. It scans your project for components and makes them available globally without the need for manual imports.
Automatic Component Registration
By setting `components: true` in your Nuxt.js configuration, the @nuxt/components module will automatically scan your project for components and register them globally, eliminating the need for manual imports.
export default {
components: true
}
Custom Directories
You can specify custom directories for your components and even add a prefix to avoid naming conflicts. This allows for better organization and modularity in your project.
export default {
components: [
'~/components',
{ path: '~/custom-components', prefix: 'Custom' }
]
}
Dynamic Imports
The module supports dynamic imports, which can help in code-splitting and optimizing the loading time of your application. You can configure the directories and file extensions to be dynamically imported.
export default {
components: {
dirs: [
{ path: '~/components', extensions: ['vue'], level: 1 }
]
}
}
vue-loader is a webpack loader for Vue.js components. It allows you to write Vue components in a single-file format. While it doesn't automatically register components like @nuxt/components, it is essential for compiling Vue components in a webpack-based build process.
nuxt-property-decorator is a package that provides TypeScript decorators for class-style Vue components in Nuxt.js. It offers a different approach to managing components by using TypeScript and decorators, which can be more suitable for developers who prefer a strongly-typed environment.
Module to scan and auto import components for Nuxt 2.13+
components/
directorySet the components
option in nuxt.config
:
export default {
components: true
}
Note: If using nuxt 2.10...2.13
, you have to also manually install and add @nuxt/components
to buildModules
inside nuxt.config
.
Create your components:
| components/
---| ComponentFoo.vue
---| ComponentBar.vue
Use them whenever you want, they will be auto imported in .vue
files :
<template>
<ComponentFoo />
<component-bar />
</template>
No need anymore to manually import them in the script
section!
See live demo or video example.
Nuxt by default does code-splitting per page and components. But sometimes we also need to lazy load them:
v-if
or being in a modalIn order to lazy load a component, all we need to do is to add Lazy
prefix to component name.
You now can easily import a component on-demand:
<template>
<LazyComponentFoo v-if="foo" />
<button @click="loadFoo">
Load Foo
</button>
</template>
<script>
export default {
data() {
return {
foo: null
}
},
methods: {
async loadFoo() {
this.foo = await this.$axios.$get('foo')
}
}
}
</script>
If you want to prefetch or preload the components with Lazy
prefix, you can configure it by prefetch/preload options.
If you have components in nested directories:
| components/
---| my/
------| form/
---------| TextArea.vue
The component name will contain its path:
<MyFormTextArea />
For clarity, it is recommended that component file name matches its name. You can also use MyFormTextArea.vue
as name with same directory structure.
If for any reason different prefix is desired, we can add specific directory with the prefix
option: (See directories section)
components: ['~/components/', { path: '~/components/foo/', prefix: 'foo' }]
It is possible to have a way to overwrite components using the level option. This is very useful for modules and theme authors.
Considering this structure:
| node_modules/
---| my-theme/
------| components/
---------| Header.vue
| components/
---| Header.vue
Then defining in the nuxt.config
:
components: [
'~/components', // default level is 0
{ path: 'node_modules/my-theme/components', level: 1 }
]
Our components/Header.vue
will overwrite our theme component since the lowest level overwrites.
By setting components: true
, default ~/components
directory will be included.
However you can customize module behaviour by providing directories to scan:
export default {
components: [
'~/components', // shortcut to { path: '~/components' }
{ path: '~/components/awesome/', prefix: 'awesome' }
]
}
Each item can be either string or object. String is shortcut to { path }
.
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.
String
Path (absolute or relative) to the directory containing your components.
You can use Nuxt aliases (~
or @
) to refer to directories inside project or directly use a npm package path similar to require.
Array<string>
builder.supportedExtensions
)['vue', 'js']
or ['vue', 'js', 'ts', 'tsx']
depending on your environmentExample: Support multi-file component structure
If you prefer to split your SFCs into .js
, .vue
and .css
, you can only enable .vue
files to be scanned:
| components
---| componentC
------| componentC.vue
------| componentC.js
------| componentC.scss
// nuxt.config.js
export default {
components: [{ path: '~/components', extensions: ['vue'] }]
}
string
(glob pattern)**/*.${extensions.join(',')}
Accept Pattern that will be run against specified path
.
Array
string
(glob pattern)[]
Ignore patterns that will be run against specified path
.
String
''
(no prefix)Prefix all matched components.
Example below adds awesome-
/Awesome
prefix to the name of components in awesome/
directory.
// nuxt.config.js
export default {
components: [
'~/components',
{ path: '~/components/awesome/', prefix: 'awesome' }
]
}
components/
awesome/
Button.vue
Button.vue
<template>
<div>
<AwesomeButton>Click on me 🤘</AwesomeButton>
<button>Click on me</button>
</div>
</template>
Boolean
true
Prefix component name by it's path
Boolean
true
Watch specified path
for changes, including file additions and file deletions.
Boolean
'auto'
Transpile specified path
using build.transpile
, by default ('auto'
) it will set transpile: true
if node_modules/
is in path
.
Number
0
Level are use to define a hint when overwriting the components which have the same name in two different directories, this is useful for theming.
export default {
components: [
'~/components', // default level is 0
{ path: 'my-theme/components', level: 1 }
]
}
Components having the same name in ~/components
will overwrite the one in my-theme/components
, learn more in Overwriting Components. The lowest value will overwrite.
Boolean/Number
false
These properties are used in production to configure how components with Lazy
prefix are handled by Wepack via its magic comments, learn more in Wepack's official documentation.
export default {
components: [{ path: 'my-theme/components', prefetch: true }]
}
yields:
// plugin.js
const componets = {
MyComponentA: import(/* webpackPrefetch: true */ ...),
MyComponentB: import(/* webpackPrefetch: true */ ...)
}
false
unless component name ends with .async.vue
This flag indicates, component should be loaded async (with a seperate chunk) regardless of using Lazy
prefix or not.
v1
to v2
Starting with nuxt@2.15
, Nuxt uses @nuxt/components
v2:
components/global/
to components/
and global: true
is not required anymorecomponents
is used to prefix component names. If you were structing your
components in multiple directories, should either add prefix or register in components
section of nuxt.config
or use new pathPrefix
option.Example:
components
├── atoms
│ └── icons
├── molecules
│ └── illustrations
├── organisms
│ └── ads
└── templates
├── blog
└── home
// nuxt.config.js
export default {
components: [
'~/components/templates',
'~/components/atoms',
'~/components/molecules',
'~/components/organisms'
]
}
Making Vue Component libraries with automatic tree-shaking and component registration is now damn easy ✨
This module expose a hook named components:dirs
so you can easily extend the directory list without updating user configuration in your Nuxt module.
Imagine a directory structure like this:
| node_modules/
---| awesome-ui/
------| components/
---------| Alert.vue
---------| Button.vue
------| nuxt.js
| pages/
---| index.vue
| nuxt.config.js
Then in awesome-ui/nuxt.js
you can use the components:dir
hook:
import { join } from 'path'
export default function() {
this.nuxt.hook('components:dirs', dirs => {
// Add ./components dir to the list
dirs.push({
path: join(__dirname, 'components'),
prefix: 'awesome'
})
})
}
That's it! Now in your project, you can import your ui library as a Nuxt module in your nuxt.config.js
:
export default {
buildModules: ['@nuxt/components', 'awesome-ui/nuxt']
}
And directly use the module components (prefixed with awesome-
), our pages/index.vue
:
<template>
<div>
My <AwesomeButton>UI button</AwesomeButton>!
<awesome-alert>Here's an alert!</awesome-alert>
</div>
</template>
It will automatically import the components only if used and also support HMR when updating your components in node_modules/awesome-ui/components/
.
Next: publish your awesome-ui
module to npm and share it with the other Nuxters ✨
FAQs
Auto Import Components for Nuxt.js
The npm package @nuxt/components receives a total of 142,095 weekly downloads. As such, @nuxt/components popularity was classified as popular.
We found that @nuxt/components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.