Forum : import de composants global

Bonjour,
je ne comprend pas bien le fonctionnement de VueJs sur l'import des composants en global.

je suis sur laravel 8, j'utilise webpackmix de maniere trés classique. je pourrais donner mon webpackmix si vous le désiré mais je ne pense pas que ce soit utilse.

voici un extrait de mon main.js

import {store} from './stores'
import {router} from './router'
import globalComponents from './components/components'
import informations from "./pages/informations";

const app = new Vue({
    el: '#app',
    router,
    store,
    components: {
        informations,
        ...globalComponents
    },
    data: { },
});

voici un mon fichier components.js qui fonctionne correstement :

import Vue from 'vue';
import Multiselect from "vue-multiselect";

import flashbag from './flashbag';

Vue.component('zaz-input',require('./form/zaz-input').default)
Vue.component('zaz-number',require('./form/zaz-number').default)
Vue.component('zaz-checkbox',require('./form/zaz-checkbox').default)
Vue.component('zaz-check-array',require('./form/zaz-check-array').default)
Vue.component('zaz-buttons-reset-save',require('./form/zaz-buttons-reset-save').default)
Vue.component('zaz-daterange',require('./form/zaz-daterange').default)
Vue.component('zaz-loader',require('./tools/zaz-loader').default)

export default{
    Multiselect,
    flashbag
}

mais à la place d'utiliser le methode component de Vue, je préfèrerais faire comme pour flashbag et exporter directement le composant donc j'ai fait énoorrrmmmeement de tentative et je ne comprend pas pourquoi quelque chose comme ci-dessous ne fonctionne pas :

[...]
import ZazInput from "./form/zaz-input";

export default{
    Multiselect,
    flashbag,
    ZazInput
}

[...]
import ZazInput from "./form/zaz-input";

export default{
    Multiselect,
    flashbag,
    ...{'zaz-input': ZazInput}
}

j'ai toujours ce genre de message d'erreur

[Vue warn]: Unknown custom element: <zaz-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

Il n'y a rien d'important mais je me creuse la tête et je ne comprend pas pourquoi, je n'arrive à obtenir directement l'objet utilisable, afin de pouvoir par exemple le remplacé à la volé plus facilement.

Si quelqu'un à une meilleur maitrise que moi et peut m'expliquer des choses je le remerci d'avance, ainsi que toute les personnes qui ont jetter un oeil sur ces quelques lignes.

5 réponses

BurnItAll

Salut,

Je ne vois pas spécifiquement d'erreur dans ton code, mais as-tu essayé comme t'indique le [Vue warn] de passer une valeur name à tout tes composants?
VueJS est assez strict dans certain cas concernant l'utilisation du CamelCase ou du PascalCase, le mieux est d'indiquer directement à VueJS via la valeur "name".


<script>
export default {
    name: "ZazInput",
    setup() {
    // [...]
    }
}
</script>

nikoumhook

Auteur

merci pour cette réponse , tout mes composants ont toujours un name mais je n'arrive pas à comprendre dans quel cas il utilise cette propriété

BurnItAll

VueJS utilise cette propriété notamment lors de l'utilisation du tag <component>


<template>
<div>
    <component :is="ZazInput">
        <!-- [...] -->
    </component>
</div>
</template>

BurnItAll

Dans ton fichier components.js, tu importes Vue from "vue" (instance globale), puis tu enregistre tes composants. ton instance vue créée dans ton app.js n'est donc pas concernée.

Si tu veux desctructurer ton code de la sorte, il faut que tu exporte cette instance :

// app.js
const app = new Vue({
    el: '#app',
    router,
    store,
    data: { },
});

export { app }

// components.js
import { app } from "../app.js"

app.component('zaz-input',require('./form/zaz-input').default)

L'enregistrement des composants Vue dans ton instance requiert un objet, pas une instance de Vue.component (qui sert lui a enregistrer un composant).

nikoumhook

Auteur

Je voulais le déclaré globalement pour pouvoir utiliser les composants dans le blade or de mon application Vue, mais je vais essayer de le faire dans ce sens ce sera surement bien mieux. merci beaucoup