Pagekit/VueJS: Ошибка добавления VueJS-компонента

Question

Возможно, вы можете стать спасителем моего времени.

Я пытаюсь реализовать vue-компоненты для моего расширения.

Я не могу включить пользовательские компоненты Vue.js. Я последовал за https://pagekit.com/docs/developer-basics/vuejs-and-webpack, чтобы создать компонент, который должен предоставить модальное поле, которое должно быть включено в представление настроек моего расширения. Этот модал должен использоваться несколько раз на одной странице с другим содержимым, поэтому я бы предпочел использовать компонентный компонент вместо жесткого кодирования его снова и снова в окне настроек (views/settings.php).

Для архивирования этого я создал следующий файл: app/components/template.vue

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

<script> 

    module.exports = { 

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

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

</script> 

Я также обновил 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"} 
      ] 
     } 
    } 

]; 

и я зарегистрировал компонент в index.php

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

Теперь я попытайтесь получить то, что работает в е вид

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

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

Но тест-строка не отображается

Answer 1

Вы именование компонента 'шаблона' при выполнении этого:

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

изменить его на:

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