does not work with components in folder format

[cataline66]

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

[alvarosabu]

Confirmed. template or render function not defined.

Sandbox link --> https://codesandbox.io/s/nuxt-components-p4bze?file=/components/component-c/ComponentC.js

[Krutie]

@alvarosaburido In the sandbox, I see that there are two files with the same name, ComponentC (one .js and other .vue); while using this module (as of v0.3.0), component-names are based on their filenames. (Ref: https://github.com/nuxt/components#nested-components)

I'd suggest you try,

• changing ComponentC.js file-name to something different, like component-c-script.js,
• then update script tag in ComponentC to reflect this new name, like, <script src="./component-c-script.js"></script>

...and after that, <ComponentC/> should render just fine.

[alvarosabu]

changing ComponentC.js file-name to something different, like component-c-script.js,
then update script tag in ComponentC to reflect this new name, like, <script src="./component-c-script.js"></script>

@Krutie Thanks for the answer, indeed works the way you suggested, seems like if you decide to go for separation of concerns approach you can't name the .js file the same as the .vue template.

[cataline66]

guys, do not escape the scope of my question hehe

which is when we want to represent a component through a folder and inside the folder an ‘index.vue’

and not when we try to import a ‘.js’ file inside a component, if this is a problem, they should open another issue

[alvarosabu]

so that we can put other things inside regarding the component, for example, a spec.js

Hey @cataline974, then I'm confused by this phrase, using a separate script is just separation of concerns and it's inside of the scope of 'does not work with components in folder format' ,

├── src
│   └── components
│         └── ButtonStyled
│           └── index.vue
│           └── ButtonStyled.js

But fair enough #29 ✌️

[cataline66]

@alvarosaburido @pi0

in my question I do not include ButtonStyled.js as file JS... but this ButtonStyled as folder.

the component name must be the folder name, this is the natural behavior in normal components and pages.

this is the normal mode I mean, which works well.

[pi0]

Hi. Support for index files, added with v0.3.2 (#30) :)

[cataline66]

@pi0 it was not solved

"@nuxt/components": "^0.3.2"

[pi0]

@alvarosaburido Seems related to new build improvements. Would you please upgrade to 0.3.3?

[cataline66]

works fine, thank you very much!