Closed curtisblackwell closed 8 years ago
P.S. I have tried figuring out local registration, but I can't run Vue.extend()
without require()
-ing Vue, which I'm pretty sure I'm not supposed to do in the .vue
file.
You can have an index.js
that simply imports and exports these:
exports.Accordion = require('./accordian.vue')
exports.Accordions = require('./accordians.vue')
// ...
Then in your app code (with ES2015 modules):
import { Accordion, Accordions, ... } from 'my-accordion'
export default {
components: {
Accordion,
Accordions,
...
}
}
In local registration you don't need to call Vue.extend()
.
Thanks Evan, that works!
In case anyone else has this issue, after setting up the module as Evan above, you use the components after installing with npm like this:
components: {
Accordions: Accordion.Accordions,
Accordion: Accordion.Accordion,
AccordionTab: Accordion.AccordionTab,
AccordionPanel: Accordion.AccordionPanel
}
I had re-opened this thinking there was something wrong, but I just had a misunderstanding of how child components work. I was trying to use them outside of the parents' templates, which was causing issues.
As my components are written now, the above works. I'll reevaluate whether I should use child components at a later date.
I'm working on a front-end framework and have built a handful of Vue components into it. I decided I want to split the components out separately and use npm to install them as necessary.
I've got a simple component working, but I'm having difficulty with another, slightly more complex component. The second one is an accordion and uses child components (though I'm guessing not correctly, which may be my problem). I'm sure I could get it to work by installing each piece separately via npm, but that seems silly. I want to be able to keep them all in a single repo and to use
npm install my-accordion
.If you could take a look at my code and let me know if I'm doing something wrong and/or if I'm wasting my time trying to get vueify working for this, I'd appreciate it.
The markup looks something like this:
I've got four separate
.vue
files for my accordion component:accordions.vue
accordion.vue
accordion-tab.vue
accordion-panel.vue