やりたいこと

Djangoのtemplatesのhtmlファイルに、Vueの単一コンポーネントを複数渡したいです。
例えば、VueでSample-1とSample-2のコンポーネントを用意します。
そして、Djangoのindex.htmlに上記2つのコンポーネントを別々で呼び出して表示させたいです。

vue
1// Sample-1.vue
2<template>
3    <h1>Sample-1</h1>
4</template>
5
6<script>
7export default {
8    name: {
9        'Sample-1'
10    }
11}
12</script>

vue
1// Sample-2.vue
2<template>
3    <h1>Sample-2</h1>
4</template>
5
6<script>
7export default {
8    name: {
9        'Sample-2'
10    }
11}
12</script>

html
1{% load render_bundle from webpack_loader %}
2<!DOCTYPE html>
3<html>
4    <head>
5        <meta charset="UTF-8">
6        <title>Sapmle Page</title>
7    </head>
8
9    <body>
10        <div id="app">
11            <Sample-1/>
12            <Sample-2/>
13        </div>
14        {% render_bundle 'app' %}
15    </body>
16</html>

試したこと

entry-pointであるmain.jsで以下の記述を試してみました。

パターン１

javascript
1new VUe({
2    el: '#app',
3    components: {
4        Smaple-1,
5        Smaple-2
6    }
7})

エラー内容

ESlintにより下記のエラーが出力されました。

Do not use 'new' for side effects.

パターン２

javascript
1new Vue({
2    components: {
3        Sample-1,
4        Smaple-2
5    }
6}).$mount('#app')

エラー内容

Sample-1もSample-2も表示されませんでした。

パターン３

javascript
1const vueApp = new Vue({
2    components: {
3        Sample-1,
4        Smaple-2
5    }
6})
7
8vueApp.$mount('#app')

エラー内容

Sample-1もSample-2も表示されませんでした。

パターン４

javascript
1new Vue({
2    render: h => h(Sample-1, Sample-2)
3}).$mount('#app')

エラー内容

Sample-1は表示されたものの、Sample-2は表示されませんでした。

環境

VirtualBox
vagrant
centos-7
Python 3.7.0
Django 2.5.5
Vue.js 2.6.11
vue/cli 4.2.3
Vuetify 2.2.11

追記:2020/04/03

試しに下記のようにVueコンポーネントを一つDjangoテンプレートに渡してみたところ、うまくいきませんでした。
Djangoテンプレートに下記のような方法で渡すのは難しいのでしょうか？

html
1{% load render_bundle from webpack_loader %}
2<!DOCTYPE html>
3<html>
4    <head>
5        <meta charset="UTF-8">
6        <title>Sapmle Page</title>
7    </head>
8
9    <body>
10        <div id="app">
11            <sample/>
12        </div>
13        {% render_bundle 'app' %}
14    </body>
15</html>

javascript
1// main.js
2var vueApp = new Vue({
3    el: '#app',
4    components: {
5        Sample
6    }
7})
8
9vueApp.$mount(#app)

エラー内容

ブラウザ上で下記のような表示が出力されます。

<!--function (a, b, c, d) {
return createElement(vm, a, b, c, d, true);
}-->

以下のリンクのように読み込みたいです。
vue.jsのDjangoでの使い所

以上、拙い文章ではございますが、どなたかご教授頂けると幸いです。

行動規範の内容に同意します

回答2件

自己解決

ランタイムビルドではなく完全ビルドでの読み込み

vue.config.jsに、下記の設定を記述することで、解決しました。

javascript
1// vue.config.js
2config.resolve.alias
3  .set('vue$', 'vue/dist/vue.esm.js')

投稿2020/04/07 01:04

stakizawa

総合スコア117

素のvue.jsなら

html
1    <body>
2        <div id="app">
3            <sample-1></sample-1>
4            <sample-2></sample-2>
5        </div>
6        <script src="main.js"></script>
7    </body>

js
1Vue.component('sample-1', {
2	template:'<h1>Sample-1</h1>'
3})
4
5Vue.component('sample-2', {
6	template:'<h1>Sample-2</h1>'
7})
8
9var vm = new Vue({
10	el: '#app'
11})
12

こんな感じ、Webpackを使用するなら参考にしたサイトそのままでいけます

投稿2020/04/03 08:20

minrara

総合スコア55

minrara

2020/04/03 08:27

htmlに直接渡したいなら <script type="module" src="コンポーネントファイル名.js"></script>でいけます。

stakizawa

2020/04/03 08:57

回答頂きありがとうございます。補足になりますが、参考サイトをそのままで行ったところ、ESlintに変数vueAppが使用されていないと、怒られてしまったためvueApp.$mount('#app')を追加させていただきました。加えて質問なのですが、 ```  ``` 上記のエラーメッセージが出力される原因としては、完全ビルドとランタイムビルドによる違いが原因となるのでしょうか？お手数ですが、ご確認よろしくお願いいたします。

行動規範の内容に同意します

あなたの回答