Vue.js не работает при вызове mix.react и mix.js с помощью Laravel Mix

Vue.js не работает при вызове mix.react и mix.js с помощью Laravel Mix.

Однако комментирование mix.react приводит к правильной работе Vue.js.

Ты знаешь почему?

РАБОТА (webpack.mix.js)

let mix = require('laravel-mix');
mix.js('src/resources/assets/vuejs/app.js', 'src/assets/js/vue_app.js');
// mix.react('src/resources/assets/js/app.js', 'src/assets/js/react_app.js');

Laravel-Mix 2.1.11
vue 2.5.16
реагировать 15.6.2

Журнал консоли

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> at src/resources/assets/vuejs/components/Notification.vue

НЕ РАБОТАЕТ (webpack.mix.js)

let mix = require('laravel-mix');
mix.js('src/resources/assets/vuejs/app.js', 'src/assets/js/vue_app.js');
mix.react('src/resources/assets/js/app.js', 'src/assets/js/react_app.js');

HTML

<html>
<body>
<div id = "app">
    <h1>Test</h1>
    <notification>
        slot message
    </notification>
</div>
{{ asset_js('vue_app.js') }}
</body>
</html>

SRC / ресурсы / активы / vuejs / app.js

import Vue from "vue";
import Notification from "./components/Notification.vue";
new Vue({
    el: '#app',
    components: {Notification},
});

SRC / ресурсы / активы / vuejs / компоненты / Notification.vue

<template>
    <div class = "notification">
        {{ body }}
        <p>
            <slot></slot>
        </p>
    </div>
</template>

<script>
    export default {
        name: 'notification',
        data() {
            return {
                body: 'I am a notification.'
            }
        }
    }
</script>

<style>
    .notification {
        background: red;
    }
</style>

Я обнаружил аналогичную проблему, временно заменил mix.js на mix.react. github.com/JeffreyWay/laravel-mix/issues/1627

— 15.06.2018 04:36

javascript laravel reactjs vue.js vuejs2

13.06.2018 10:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

496

Другие вопросы по теме

Сессия Lumen / Laravel для определенного маршрута

Laravel-echo-server не слушает все уведомления

Запись обновления Laravel с использованием построителя запросов

Восстановить изображение из БАЗЫ ДАННЫХ

Проверка Laravel для массивов

Зачем использовать хинтинг переменных в Laravel или PHP

Lumen5.6 - ReflectionException Class XXController не существует

Как сохранить входные данные с идентификатором пользователя в Laravel с помощью Eloquent?

Игнорировать уникальную роль с настраиваемым ключом - Laravel - Mongodb

Ограничение маршрута Laravel Voyager

Vue.js не работает при вызове mix.react и mix.js с помощью Laravel Mix

Другие вопросы по теме

Похожие вопросы