3

Maybe you can be the savior of my day.

I'm trying to implement vue-components to my extension.

I can not include custom Vue.js components. I followed https://pagekit.com/docs/developer-basics/vuejs-and-webpack to create a component that should provide a modal-field that should be included to the settings-view of my extension. This modal should be used multiple times on the same page with different contents, so I would prefer using a custom component instead of hard-coding it over and over again to the settings-view (views/settings.php).

To archive this I created the following file: app/components/template.vue

<template>
<div>Test</div>
</template>

<script>

    module.exports = {

        section: {
            label: 'Template',
            priority: 100
        }
    };

    window.Settings.components['template'] = module.exports;

</script>

I also updated the webpack.config.js

module.exports = [

    {
        entry: {
            "settings": "./app/views/admin/settings",
            "template": "./app/components/template.vue"

        },
        output: {
            filename: "./app/bundle/[name].js"
        },
        module: {
            loaders: [
                {test: /\.vue$/, loader: "vue"}
            ]
        }
    }

];

and I registered the component in the index.php

    'events'      => [
        'view.scripts' => function ( $event, $scripts ) {
            $scripts->register( 'template', 'isp:app/bundle/template.js', '~settings' );
        }
    ]

Now I try to get the things working in the view 

$view->script( 'settings', 'isp:app/bundle/settings.js', [ 'vue', 'uikit-form-password', 'editor' ] )
;

<component :is="template"></component>

But the Test-string is not shown

Thomas Ayoub
  • 29,063
  • 15
  • 95
  • 142
MyFault
  • 427
  • 1
  • 6
  • 21

1 Answers1

3

You are naming your component 'template' when doing this:

window.Settings.components['template'] = module.exports;

Change it to:

window.Settings.components['component'] = module.exports;
crabbly
  • 5,106
  • 1
  • 23
  • 46
  • Hi crabbly, unfortunately this still does not work. And other extensions do not use ['components'] here, too as you can see in https://github.com/pagekit/extension-blog/blob/master/app/components/post-meta.vue#L36 . This component is included with the name `post-meta`. – MyFault Jun 08 '16 at 07:36
  • 2
    This is where you name your component, in your case, you tried to use ``, which means you component name has to be `component`. You could change it to something else, like 'my-component`, then use it like this ``, but you would need to declare it like this `window.Settings.components['my-component'] = module.exports;` – crabbly Jun 08 '16 at 14:22