使用自定義構建的 Nuxt 模塊將 nuxt.config.js 配置注入全局注冊的組件

Question

所以這個問題可能很復雜，但我會盡量解釋清楚。

我目前正在創建 Nuxt 模塊。 如果您熟悉創建它們，您就會知道可以在nuxt.config.js中對其進行配置。 我在這里所做的：

components: {
    modules: ['carousel', 'filter', 'post-loop', 'gform'],
    gform: {
         title: true
    }
},

我有一組要全局注冊的模塊。 我已經使用以下配置完成了此操作：

(index.js)

const path = require('path');

export default function ClassName(moduleOptions) {

    const options = Object.assign({}, this.options.components, moduleOptions);
    const availableModules = ['carousel', 'filter', 'gform', 'post-loop'];
    const unknownModules = options.modules.filter(mod => !availableModules.includes(mod));

    if(!options.modules) {
        throw new Error('ERROR: Please check the ReadMe, you need to include a modules array specifying what modules you want to enable');
    }

    if(unknownModules.length > 0) {
        throw new Error(`ERROR: The following modules do not exist in the @blueelevation/components module: ${unknownModules}`);
    }

    this.addPlugin({
        src: path.resolve(__dirname, './plugin/plugin.js'),
        options: options
    })

    const cssFilesToLoad = ['carousel.css'];

    cssFilesToLoad.forEach(file => this.options.css.push(path.resolve(__dirname, `dist/css/${file}`)));

    this.addPlugin({
        src: path.resolve(__dirname, './plugin/eventbus.js'),
    })
}

需要關注的重要部分是我在 Nuxt 實例中全局注冊組件的plugin.js ：

import Vue from 'vue';

/**
 * If the module array contains carousel, we register it as a global component.
 */
<% if(options.modules.includes('carousel')) { %>
    import Carousel from '@blueelevation/components/components/Carousel/Carousel.vue';
    Vue.component('Carousel', Carousel);
<% } %>

/**
 * If the module array contains post-loop, we register it as a global component.
 */
<% if(options.modules.includes('post-loop')) { %>
    import PostLoop from '@blueelevation/components/components/PostLoop/PostLoop.vue';
    Vue.component('pwa-post-loop', PostLoop);
<% } %>

/**
 * If the module array contains filter, we register it as a global component.
 */
<% if(options.modules.includes('filter')) { %>
    import Filter from '@blueelevation/components/components/Filter/Filter.vue';
    import FilterHeading from '@blueelevation/components/components/Filter/FilterHeading.vue';
    Vue.component('pwa-filter', Filter);
    Vue.component('pwa-filter-heading', FilterHeading);
<% } %>

/**
 * If the module array contains gform, we register it as a global component.
 */
<% if(options.modules.includes('gform')) { %>
    import GForm from '@blueelevation/components/components/GForm/GForm.vue';
    Vue.component('pwa-gform', GForm);
<% } %>

如您所見，我在全局注冊組件，以防它在數組中指定。 我目前堅持的部分是我的nuxt.config.js中有一個gform.title屬性。 如何將此Boolean傳遞給全局注冊的 GForm 組件？ 所以我可以有條件地呈現標題以防true ？

Answer 1

我回答了我自己的問題。 如果有人想知道如何做到這一點，您可以通過在plugin.js中執行以下操作將某些內容注入到您的組件中：

import Vue from 'vue';
import Carousel from '@blueelevation/components/components/Carousel/Carousel.vue';
import PostLoop from '@blueelevation/components/components/PostLoop/PostLoop.vue';
import Filter from '@blueelevation/components/components/Filter/Filter.vue';
import FilterHeading from '@blueelevation/components/components/Filter/FilterHeading.vue';
import GForm from '@blueelevation/components/components/GForm/GForm.vue';

    export default(context, inject) => {
    /**
     * If the module array contains carousel, we register it as a global component.
     */
    <% if(options.modules.includes('carousel')) { %>
        Vue.component('Carousel', Carousel);
    <% } %>

    /**
     * If the module array contains post-loop, we register it as a global component.
     */
    <% if(options.modules.includes('post-loop')) { %>
        Vue.component('pwa-post-loop', PostLoop);
    <% } %>

    /**
     * If the module array contains filter, we register it as a global component.
     */
    <% if(options.modules.includes('filter')) { %>
        Vue.component('pwa-filter', Filter);
        Vue.component('pwa-filter-heading', FilterHeading);
    <% } %>

    /**
     * If the module array contains gform, we register it as a global component.
     */
    <% if(options.modules.includes('gform')) { %>
        Vue.component('pwa-gform', GForm);
        inject('GForm', {config: <%= serialize(options.gform) %> });
    <% } %>
}

請注意 gform 組件的全局注冊下方的inject() function。 我用序列化的 object 注入GForm （如nuxt.config.js中所示的options.gform ）。 之后，此GForm配置將通過以下方式在組件中可用：

this.$GForm.config 。

希望這對將來的人有所幫助。