nuxt / components Goto Github PK
View Code? Open in Web Editor NEWScan and auto import components for Nuxt.js 2.13+
License: MIT License
Scan and auto import components for Nuxt.js 2.13+
License: MIT License
Describe the bug
Custom component from external package will automatically be imported in a single file component. In independent files it does not automatically import nor allow explicit import.
Expected behavior
Either expect to be able to import from the package as normal ( import ... from '...' ) or auto import like in single file components.
Describe the bug
When components are referenced in the template of a component with the functional
attribute on the template
tag, the client displays "Unknown custom element" and "The client-side rendered virtual DOM tree is not matching server-rendered content" errors. When referenced inside a component with the functional: true
option, the server displays a "Cannot read property '$createElement' of undefined" error.
To Reproduce
Steps to reproduce the behavior: https://codesandbox.io/s/vigorous-wood-9tvfb?file=/pages/index.vue
Expected behavior
The referenced component is loaded and rendered as in regular (non-functional) components.
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
This did work in the https://github.com/nuxt-community/global-components package.
Describe the bug
Running npm run dev
--> tsc && nuxt-ts test/fixture
webpack build seems to be ok but Failed to show Nuxt.js app after 5 reloads
message appears on screen
To Reproduce
Steps to reproduce the behavior:
npm run dev
http://localhost:3000/
Expected behavior
Nuxt.js test fixture example runs correctly
Additional context
Terminal Log:
> @nuxt/[email protected] dev /Users/alvarosaburido/as/github/nuxt-components
> tsc && nuxt-ts test/fixture
WARN Experimental @nuxt/telemetry enabled. You can disable this message by explicitly setting telemetry: false or telemetry: true in nuxt.config 20:47:43
╭───────────────────────────────────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.13.0-26511862.a544fc72 │
│ Running in development, with server-side rendering and server target. │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰───────────────────────────────────────────────────────────────────────────╯
ℹ Preparing project for development 20:47:44
ℹ Initial build may take a while 20:47:44
WARN Components directory not found: ~/non-existent 20:47:44
WARN Components directory not found: ~/non-existent (repeated 0 times) 20:47:44
✔ Builder initialized 20:47:44
✔ Nuxt files generated 20:47:44
ℹ Starting type checking service... nuxt:typescript 20:47:46
✔ Client
Compiled successfully in 3.46s
✔ Server
Compiled successfully in 3.02s
ℹ Type checking in progress... nuxt:typescript 20:47:49
ℹ Waiting for file changes 20:47:49
ℹ Memory usage: 145 MB (RSS: 229 MB) 20:47:49
ℹ Listening on: http://localhost:3000/ 20:47:49
ℹ No type errors found nuxt:typescript 20:47:49
ℹ Version: typescript 3.8.3 nuxt:typescript 20:47:49
ℹ Time: 3671 ms
Describe the bug
If you import template using <template src="./template.html">
, the file is not scanned for components.
To Reproduce
index.vue
and index.html
file<template>
, import the template using <template src="./index.html">
Expected behavior
The html template should be scanned for components and imported.
Additional context
I've added the @nuxt/components
integration to @inkline/inkline and tested it out. Everything works well except for this.
You can see it reproduced here: https://codesandbox.io/s/beautiful-sound-skdp6
Describe the bug
Tried this library first time, dynamic imports
are working great!
About auto scan
feature, I found it saves many lines of codes but some tests are getting error:
[Vue warn]: Unknown custom element: <MyComponentB> - did you register the component correctly? ...
this is the case where I have MyComponentA
and MyComponentB
defined under /components
folder and MyComponentA
is using MyComponentB
.
If I resurrect lines of codes that imports MyComponentB
in MyComponentA
, the test are working back ok but I wonder if I am missing something?
Additional context
[email protected]
@nuxt/[email protected]
@vue/[email protected]
How to share the state from component library to Nuxt?
I did not find references for work with Nuxt Components and Vuex.
Is your feature request related to a problem? Please describe.
When I lazyload a component, I still want it to be preloaded. This is why I use Webpack comments:
const Header = () => import(/* webpackPreload: true */ '@/components/Header')
With LazyComponent, I don't know how to do it.
Describe the solution you'd like
Something like
<LazyHeader /* webpackPreload: true */ />
Describe alternatives you've considered
Use the usual dynamic imports
Not sure if it's a bug, but I have quiet a bit of components ~250 and seems like with more than 100 components watch takes ages, it's really really slow, I even tried to set watch: false for certain folders, but doesn't seems to be helping
To Reproduce
Steps to reproduce the behavior:
I found this project through the release notes of nuxt; if this is the wrong place to ask this question please let me know.
Describe the bug
I was surprised by the following behavior: If you use a component with a random name in your template... nuxt dev server builds everything merrily without any complaints and shows you a preview with the component missing. I'd expect some sort of import failure at some point - is this intended behavior?
To Reproduce
Steps to reproduce the behavior:
<Logo />
in index page to something randomExpected behavior
I expected to see a build error. At least a warning in case it is a typo.
Describe the bug
FATAL Module @nuxt/components not found. Please ensure @nuxt/components is in devDependencies and installed. HINT: During build step, for npm/yarn, NODE_ENV=production or --production should NOT be used.
To Reproduce
Deploy with --production=true in yarn build command.
I don't understand why using this module would mean we can't use --production
in our builds. Can someone help me understand why this is totally necessary, or at least why it isn't explained in the docs? This is a dealbreaker for me. After making a large amount of changes, I'm now need to uninstall. :(
Describe the bug
I added the components module, and now some imports in my components won't resolve. Example error from my console:
This dependency was not found: friendly-errors 23:23:59
friendly-errors 23:23:59
* ~/store/helpers/validation in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/auth/login/LoginEmail.vue
To Reproduce
Try to import any dependency into a component that is handled by this module. I also tried a relative path import instead of an alias path, but it still didn't work.
Expected behavior
I would expect imports to still work.
Additional context
nuxt version 2.12.2
Describe the bug
I installed this on another project @0.3.0 and loved it. Installed 0.3.3 on a new one and it wasn't building my components. Tried 0.3.2, 0.3.1, and eventually settled back on 0.3.0.
This is running on a brand new nuxt install.
To Reproduce
Steps to reproduce the behavior:
buildModules
in nuxt.config.js
/components/Start.vue
and reference in pages/index.vue
as <Start />
Expected behavior
The component renders.
Is your feature request related to a problem? Please describe.
I want to use this feature with https://github.com/vue-leaflet/Vue2Leaflet.
The problem is that this imports Leaflet with depends on window
beeing pressent (even when only importing it)
Describe the solution you'd like
Have an option for a folder clientOnly: true
if this is set on serverside only a dummy container is loaded.
// In production
const dummy = {render:()=>null}
// In dev
const dummy = {render:(h)=>h('You have to wrap the components inside the client-only component')}
Describe alternatives you've considered
Currently I'm useing the vuetify loader with custim components that I generate from the https://github.com/vue-leaflet/Vue2Leaflet file structure.
Additional context
User has to additionaly wrap the components in a client-only
Prior to the recent update webstorm was able to index and resolve the components when being auto imported.
Now we seem to be getting the squiggly line error saying webstorm cannot find the component.
Before it could but cmd clicking took you to the index where all the components are registered. But this was better than no cmd click functionality at all.
Thanks
Lee
Describe the bug
Shows error 'render function or template not defined in component' when component is inside of a folder and separated by concern.
├── src
│ └── components
│ └── componentC
│ └── componentC.vue
│ └── componentC.js
│ └── componentC.scss
To Reproduce
Steps to reproduce the behavior:
Run https://codesandbox.io/s/nuxt-components-p4bze?file=/components/componentC/index.vue
Expected behavior
Work Similar to a Single File Component.
NOTE:
It does work if you name the .js
file different, for example componentC.component.js
so it seems like .vue
and .js
files cannot be named the same.
Cloud be that this is just a naming convention thing, so consider if it's valuable enough for you guys to make any change. ✌️
Regards
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Goto: https://codesandbox.io/s/nuxt-components-cou9k
Click button: Fork
Wating build
Error:
Error: Cannot find module './loader'
Require stack:
- node_modules/@nuxt/components/dist/index.js
Describe the bug
When using the component in a page written in pug syntax, the component seems to be not recognized...
<template lang="pug">
div
ATitle this is a title
</template>
However, when I use it with normal HTML syntax, it will work.
<template>
<div>
<ATitle> this is a title </ATitle>
</div>
</template>
I will note that components written with pug syntax in the /components
directory didn't affect the right functionality.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
works with pug syntax
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
I am using pug with pug
, pug-plain-loader
, and pug-loader
.
Hi 👋
What I'm describing here is not really a bug since things work as they should™. But still, my webpack output is a tad confusing, so I figured I'd ask if something is wrong.
I've setup a fresh NuxtJS project with nuxt/content
and nuxt/components
which works great so far. But webpack is throwing a lot of warnings for all kinds of file types since it is apparently trying to load them but can't handle them. Apparently, these warnings originate in ./node_modules/@nuxt/components/lib/installComponents.js
as you can see in the warnings down below.
I get that webpack is missing these loaders, but what I do not understand:
/components
?pdf
file through webpack that sits in the static
folder?yarn.lock
file? 😅I have a lot of markdown files, so this is just an excerpt from the log. The warnings are about *.md
, yarn.lock
, *.pdf
files, project-wide – basically anything that is not within /components
and not a js|vue|ts
file:
WARN in ./yarn.lock friendly-errors 13:29:59
Module parse failed: Unexpected character '#' (1:0) friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
| # yarn lockfile v1
|
friendly-errors 13:29:59
@ . sync ^\.\/.*$
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
@ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
@ ./pages/initiatoren/_contributor.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
friendly-errors 13:29:59
WARN in ./README.md friendly-errors 13:29:59
Module parse failed: Unexpected character '#' (1:0) friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # project name
|
| > My ultimate Nuxt.js project
friendly-errors 13:29:59
@ . sync ^\.\/.*$
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
@ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
@ ./pages/initiatoren/_contributor.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
WARN in ./static/filename.pdf friendly-errors 13:29:59
Module parse failed: Unexpected token (1:0) friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
friendly-errors 13:29:59
@ . sync ^\.\/.*$
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
@ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
@ ./pages/initiatoren/_contributor.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
I didn't add any wild stuff in my nuxt.config.js
:
export default {
mode: 'universal',
components: true,
/*
** Headers of the page
*/
head: {
titleTemplate: '%s | THINGS,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
{ name: 'robots', content: 'noindex' },
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href:
'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☎️</text></svg>',
},
{
rel: 'preconnect',
href: 'https://fonts.gstatic.com',
crossorigin: true,
},
{
rel: 'preload',
as: 'style',
href:
'https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap',
},
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap',
media: 'print',
onload: "this.media='all'",
},
],
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/css/base.css'],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
'@nuxtjs/stylelint-module',
// TODO: Remove when upgrading to nuxt 2.13+
'@nuxt/components',
],
/*
** Nuxt.js modules
*/
modules: ['@nuxtjs/pwa', '@nuxt/content'],
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
},
}
and the packages were updated to their latest version minutes ago which did not fix anything:
{
"name": "project name",
"version": "1.0.0",
"description": "My ultimate Nuxt.js project",
"author": "Markus Siering",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"lint-staged": {
"*.{js,vue}": "yarn lint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@nuxt/content": "^1.2.0",
"@nuxtjs/pwa": "^3.0.0-0",
"nuxt": "^2.0.0"
},
"devDependencies": {
"@nuxt/components": "^0.3.3",
"@nuxtjs/eslint-config": "^3.0.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/stylelint-module": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.1.2",
"husky": "^4.0.0",
"lint-staged": "^10.2.7",
"prettier": "^2.0.5",
"stylelint": "^13.5.0"
}
}
Since this is pretty much an out of the box setup, does anyone have any idea why this is happening?
Describe the bug
The README.md file includes a link to a section called setup but this link does not have an anchor and the section seems to be missing.
To Reproduce
Check the README.md for a "setup" section
Expected behavior
Either remove the "setup" link or add a "setup" section anchor.
Is your feature request related to a problem? Please describe.
Although automation is really cool, sometimes (eg when debugging) you need to be able to exactly know what exactly happens where.
Describe the solution you'd like
A way to export the component imports that are automatically added. I can think of three possibilities:
// my-component.vue
export default {
components: {
/* start @nuxt/component imports */
put the auto added imports between comments
/* end @nuxt/component imports */
my-component.vue
the imports are exported to my-component.imports.js
. Then in your SFC you could do:// my-component.vue
import components from './my-component.imports.js'
export default {
components
}
Describe alternatives you've considered
n.a.
Additional context
Consider the situation where a component could be resolved from different folders you configured. Im guessing that atm we will just use the first match that is found, but if you dont remember anymore you had two similar named components in different folders it can get confusing quickly. This feature request should help with that.
If we would go for option 1 or 2 then we would also solve the Jest issue (or any other tool that implements their own require) in a good way.
In general I think the auto import is very cool, but fully obfuscating which imports are used where can get very confusing in bigger apps
Describe the bug
Everything works perfectly, only until you change the file extension .js
to .ts
, after that, all the components stop working.
To Reproduce
Steps to reproduce the behavior:
npx create-nuxt-app test
and choice Typescript as standard languagenuxt.config.js
to nuxt.config.ts
npm run dev
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup
e o navegador carrega infinitamenteExpected behavior
The expectation was that everything would work normally with nuxt.config.ts
after all, Typescript project was chosen
Describe the bug
When I use @nuxt/content with global components I receive error:
render function or template not defined in component: cmp
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Page content should be:
@@@
Cmp component
@@@
Additional context
If I change generated .nuxt/components/plugin.js
into:
import Vue from 'vue'
+async function () {
const globalComponents = {
Cmp: await import('../../components/global/cmp.vue' /* webpackChunkName: "components/global/cmp" */).then(c => c.default || c)
}
for (const name in globalComponents) {
Vue.component(name, globalComponents[name])
}
}()
or use direct import Cmp from '~/components/global/cmp.vue'
instead of import().then()
everything works as expected.
I am creating an external component library to use with Nuxt. What I need is to use an image inside my component, and that image lives in the component library.
Assuming I have the following directory organization, how do I get this image to appear in the Nuxt project that consumes the component library? It is possible?
| node_modules/
---| my-library/
------| assets
---------| some-image.png
------| components/
---------| SomeComponent.vue // My image is used here
------| nuxt.js
| pages/
---| index.vue
| nuxt.config.js
It is not working when component is an index.vue inside a folder.
example
├── src
│ └── components
│ └── ButtonStyled
│ └── index.vue
...
We don’t always want the component to be a file, but a folder, so that we can put other things inside regarding the component, for example, a spec.js or image.png of how the component will ultimately be, or anything else that we would like to share within the team, related to the component
solution:
behave the same as pages or old use components
pages/home/index.vue
or
components/ButtonStyled/index.vue
and vue knows that index.vue
is the ButtonStyled component
My component library has an icon component that uses vue-fontawesome
, when I export my library for it to be recognized in a Nuxt project, I add a prefix, for example: my
.
In the Nuxt project, when trying to use <my-icon> </my-icon>
he does not find <font-fontawesome>
, which in turn is added within my library, and not from the Nuxt project.
What is the best approach to deal with this?
If I install vue-fontawesome
in both the library and the Nuxt project, it would be duplicated. I don't think it's the best solution. Right?
I installed the library and I'm getting an error
Uncaught ReferenceError: describe is not defined
at eval (webpack-internal:///./client/components/general/link/__tests__/link.ts:12)
at Module../client/components/general/link/__tests__/link.ts (app.js:2230)
at __webpack_require__ (runtime.js:790)
at fn (runtime.js:151)
at eval (webpack-internal:///./client/components/layout/sidebar/Navigation.vue:26)
at Module../client/components/layout/sidebar/Navigation.vue (app.js:2470)
at __webpack_require__ (runtime.js:790)
at fn (runtime.js:151)
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/@nuxt/components/dist/loader.js?!./node_modules/vue-loader/lib/index.js?!./client/components/layout/sidebar/Sidebar.vue?vue&type=script&lang=ts&:3)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/@nuxt/components/dist/loader.js?!./node_modules/vue-loader/lib/index.js?!./client/components/layout/sidebar/Sidebar.vue?vue&type=script&lang=ts&
I assume this is because I have a __tests__
folder inside my components folder and nuxt is probably trying to open and read it.
At the same time it probably shouldn't because these folders are set in .nuxtignore
. (**/__tests__
)
I've also tried these paths:
__tests__ , __tests__/ **/__tests__ **/__tests__/*
Describe the bug
My project uses Vuetify, and before I added the component module, this worked:
computed: {
breakpoint() {
return this.$vuetify.breakpoint;
}
}
After adding components, the same file generated an error:
Cannot read property 'breakpoint' of undefined
I'm also seeing vuex-pathify generate errors of the sort:
Error in render: "Error: [Vuex Pathify] Unknown module 'library' via path 'library/list'"
Are modules generally supposed to be available inside components imported via this module? I'd hope so, otherwise they're useless to me...
nuxt v2.12.2
components v0.3.0
Describe the bug
I tried everything I found on the docs but when I try to use a component that has it's own directory inside the components folder it does not work. I get an error message:
[Vue warn]: Unknown custom element: <NavigationELHeader> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
This does not happen on the components I have on the root component folder.
I added the element on nuxt.config.js like this:
components: [
'~/components',
{ path: '~/components/Navigation/', prefix: 'Navigation' },
],
And also added it to buildModules.
Then I tried to use the component as <NavigationComponentNameInsideTheDirectory />
but it's when I get the error.
I'm doing something wrong?
I have built a component that is used to display content out of WordPress. Sometimes this content includes a Vue component, like <shortcode-gallery/>
for example, and using a render function this component will actually render those Vue components from content in the CMS.
render(h) {
return h({
template: `<div class="wp-content">${this.htmlTemplate}</div>`
})
}
This works great currently, but it has required me to pre-load all components that could be used in the CMS. Is there anyway I can use this plugin to help lazy-load components if they are present in a string of HTML?
I was thinking it could work like this:
watch: {
htmlTemplate(newVal) {
// newVal is a string of HTML,
// Now look to preload any components found in the string
this.$components("loadComponents", newVal)
}
}
It seems nuxt/components is geared around webpack, so this is probably not going to work how I imagine, but I thought I'd ask.
Describe the bug
When using a conditional component within a functional component a TypeError: _vm._v is not a function
is thrown
To Reproduce
See the test case commit I added on this branch: 6aa9ea0
Expected behavior
That there would be no error
Screenshots
na
Additional context
I checked several things:
_v
method (for debugging) in the provideFunctionalComponent
method, you will get another error about _e
not being a function.Unfortunately thats all I managed to do, eg I dont fully understand where these _c/v/e
names are originating from (is that some vue-loader thing?).
Describe the bug
I've run into this as newly, by npx create-nuxt-app
created projects have set components: true
by default. Wondering why I can't see the correctly source-mapped files in my browser console when trying to debug something, I finally found out that setting components: true
in nuxt.config.js
triggers this behaviour.
With nuxt/components disabled I can see the following in Firefox:
or in Chromium:
those *.vue
files contain the correctly source-mapped code of my components. When setting components: true
, those disappear and I'm unable to debug my code in the browser console.
To Reproduce
npx create-nuxt-app
(universal, static)nuxt
or npm run dev
to start the dev environmentcomponents: true
or set it to false (in nuxt.config.js
)Expected behavior
debugging with source-mapped vue-component files should be available regardless of components: true
Screenshots
see above
Additional context
I don't know who is maintaining the default for npx create-nuxt-app
, but if this is a technical limitation of nuxt/components, maybe this shouldn't be enabled by default then...
Describe the bug
I expected components to be available for use via is
, like this:
<component is="ComponentName">
But from the error log it seems that the components are not registered.
To Reproduce
Check the console output at https://codesandbox.io/s/nuxt-components-fdcw5?file=/components/LazyComponentA.vue
Expected behavior
Components should render the same as if using them directly.
Additional context
Add any other context about the problem here.
My entire component library uses scoped style. When I try to use them with Nuxt Components, the styles of my components are not loaded with the Nuxt project.
Does Nuxt Components not work with components that use scoped styles?
It would be great if this supported your defined custom webpack loaders, so we could use SVG's as components and have them auto imported.
I wish we could do this:
// In template
<template>
<svg-logo/>
</template>
// nuxt.config.js
components: [
{ path: "~/components", extensions: ["vue"] },
{ path: "~/assets/svgs/", prefix: "svg", extensions: ["svg"] }
],
build: {
extend(config, { isDev, isClient }) {
// Add SVG loader
config.module.rules.push({
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "vue-svg-loader",
options: {
svgo: {
plugins: [{ removeViewBox: false }]
}
}
}
]
})
}
Describe the bug
Also see discussion on discord.
bootstrap-vue has multiple ways to import components:
import { BAlert } from 'bootstrap-vue'
import { BAlert } from 'bootstrap-vue/esm/index.js'
import { BAlert } from 'bootstrap-vue/esm/components/alert/index.js'
import { BAlert } from 'bootstrap-vue/esm/components/alert/alert.js'
import { BAlert } from 'bootstrap-vue/src/components/alert/alert.js'
But I am unable to get any of them to work atm as the following error is logged (that path is the correct path). I also tried to manually add a default export but that didnt work either.
These dependencies were not found:
* node_modules/bootstrap-vue/esm/components/alert/alert.js in ./src/layouts/default.vue
...
To Reproduce
<b-alert show>Alert!</b-alert>
somewhere in a componentExpected behavior
I was expecting that I could use nuxt/components to also load components from ui-libraries like bootstrap-vue
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Describe the bug
The @nuxt/components
module works at version 0.2.5. Version 0.3.0 and higher does not.
I'm running nuxt 2.12.2.
I have it included in devDependencies:
"devDependencies": {
"@nuxt/components": "^0.3.3",
...
My .vue components are in /components
- some in the root of /components
, some in folders under /components
.
My buildModules are:
buildModules: [
'@nuxtjs/eslint-module', // Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/stylelint-module', // Doc: https://github.com/nuxt-community/stylelint-module
'@nuxt/components', // TODO: Remove when upgrading to nuxt 2.13+
],
My build
includes:
babel: {
presets({ isServer }) {
return [
[
require.resolve('@nuxt/babel-preset-app'),
{
buildTarget: isServer ? 'server' : 'client',
corejs: { version: 3 },
},
],
];
},
},
Am I missing something that changed in 0.3.0+?
When I have set components: true
in nuxt.config.js
, importing any component that has a custom tag with markdown content will result in error Module parse failed: Unexpected character '#'
, You may need an additional loader to handle the result of these loaders.
I am using vue-styleguidist to document component libraries, so component libraries are Vue plugins and components are imported for example like this import { SomeComponent } from '@namespace/components
. Why does nuxt/components even try to autoload components outside of the components
directory?
To Reproduce
I have created a fork with fixtures to demonstrate this behaviour.
Steps to reproduce:
$ git clone [email protected]:welluh/components.git
$ git checkout ignore-docs-tag
$ yarn install && yarn test
Expected behavior
I would expect custom blocks to be ignored completely and documentation to have steps that can be followed when indeed content from custom blocks are wanted for rendering.
Additional context
I tried to apply something like this to the webpack loader rules (see src/docs-loader.ts), but felt pretty lost how to make it work here.
I can confirm I was able to resolve this locally by following instructions here and adding the loader via nuxt.config.js like this:
build: {
extend(config) {
config.module.rules.push({
resourceQuery: /blockType=docs/,
loader: require.resolve('./loaders/docs-loader.js')
})
}
}
Describe the bug
I apparently configured an invalid folder and now Nuxt doesnt start anymore due to this fatal error being logged:
FATAL ENOTDIR invalid cwd /var/project/node_modules/bootstrap-vue/src/index.js 11:13:56
at GlobSync._readdirError (node_modules/glob/sync.js:324:21)
at GlobSync._readdir (node_modules/glob/sync.js:290:10)
at GlobSync._processGlobStar (node_modules/glob/sync.js:350:22)
at GlobSync._process (node_modules/glob/sync.js:130:10)
at new GlobSync (node_modules/glob/sync.js:48:10)
at Function.globSync [as sync] (node_modules/glob/sync.js:26:10)
at Object.scanComponents (node_modules/@nuxt/components/dist/scan.js:25:49)
at node_modules/@nuxt/components/dist/index.js:36:39
at processTicksAndRejections (internal/process/task_queues.js:93:5)
To Reproduce
I added this config:
['@nuxt/components', {
dirs: [
'~/components',
{
prefix: 'b',
path: 'node_modules/bootstrap-vue/src/'
}
]
}],
Expected behavior
Although the path might be wrong because its missing a pattern, I'd expected the error message to be a bit cleaner then Error: ENOTDIR invalid cwd
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
With a complicated website, it's common to have lots of components in many different directories (see screenshot for example).
It would be great to allow for auto-prefix'ing of component names, based on parent directories.
I imagine it could work like this:
export default {
components: [{ path: "~/components", prefix: true }]
}
So if you had this directory structure:
- /components
- - /block
- - - Work.vue
- - /form
- - - /group
- - - - Radios.vue
You'd get <block-work>
and </form-group-radios>
as components automatically.
Describe the bug
Broken website after upgrading from "nuxt": "^2.12.2"
to "nuxt": "^2.13.0"
on IE 11.
To Reproduce
Steps to reproduce the behavior:
nuxt: v2.13.0
;npm run dev
;Expected behavior
No errors.
Additional context
The error was not present before the upgrade.
Describe the bug
If components prefix is same as beginning of component name for example: l-loader, l-label-default then it is not importing and I'm facing an error:
"Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
Describe the bug
I was using the nuxt global components module before this module came out. I have a few components which I am using recursively. Code below. That was working as I was naming the components as required by Vue to use them recursively.
However, after upgrading to 2.14.3 and nuxt components modules, I am getting the below error for recursive components:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option
My components are still named. See the example below
<template>
<div >
<div
v-for="(item2,propertyName2) in item"
:key="propertyName2"
>
<p class="font-weight-bold title mt-5 primary--text" v-if="typeof item2 === 'object' && !property && !(item2 instanceof Date)">{{ propertyName2.replace(/_/g, ' ') | capitalize }}</p>
<p class="font-weight-bold text--secondary" v-else-if="typeof item2 === 'object' && !(item2 instanceof Date)">{{ propertyName2.replace(/_/g, ' ') | capitalize }}</p>
<CaseItem v-if="(typeof item2 !== 'object' && !Array.isArray(item2)) || (item2 instanceof Date)" :item='item2' :property="property ? `${property}.${propertyName2}` : propertyName2" />
<CaseObject v-if="typeof item2 === 'object' && !Array.isArray(item2) && !(item2 instanceof Date)" :item="item2" :property="property ? `${property}.${propertyName2}` : propertyName2"/>
<CaseArray v-if="Array.isArray(item2)" :item="item2" :property="property ? `${property}.${propertyName2}` : propertyName2"
/>
</div>
</div>
</template>
<script>
export default {
name: 'CaseObject',
Expected behavior
Components should work recursively
Screenshots
Additional context
Recursive components still working fine with the nuxt global components module
Is your feature request related to a problem? Please describe.
I am too lazy to import directives manually
Describe the solution you'd like
Just parse my template for any v-
attributes, search for matching js files and add them to the component. This is one I sometimes use: https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/directives/visible but there is also https://github.com/Akryum/vue-observe-visibility
Describe alternatives you've considered
I considered doing it manually but I am too lazy
Additional context
Components and directives share the same premise with regards to the need for importing them, so it makes sense to support them too.
Dynamically (lazy loaded) components shouldn't be prefixed with Lazy. It adds confusion and can become dirty pretty quickly (especially I have a bunch of custom components in an other project with names already beginning with Lazy, like LazyLoad, LazySpin etc.)
So, instead of this:
<template>
<LazyComponentFoo v-if="foo" />
<button @click="foo=true">Load Foo</button>
</template>
you should use an explicit attribute (like defer, or lazy, IDN), maybe like this:
<template>
<ComponentFoo defer v-if="foo" />
<button @click="foo=true">Load Foo</button>
</template>
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Describe the bug
installComponents
is included in client bundle even if components: false
is included in nuxt.config
.
To Reproduce
Steps to reproduce the behavior:
yarn build
.nuxt/dist/client/app.js
Expected behavior
I expect this not to be included in the client bundle.
Additional context
I encountered this in a production application when diagnosing an issue with IE11 where this function ended up using an arrow function, but I have yet to reproduce.
Describe the bug
A clear and concise description of what the bug is.
same as the title
To Reproduce
Steps to reproduce the behavior:
Expected behavior
it should work. But got did you register the component correctly
I'm using the new components module and its a time saver. Thanks a lot.
Unfortunatly, PHPStorm with its vue.js plugin does not recognize the components anymore if they are not imported inside the vue file.
Is there a trick or a possibility to make it work again with PHPStorm / Intellij?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.