This repository was archived by the owner on Jan 18, 2022. It is now read-only.
This repository was archived by the owner on Jan 18, 2022. It is now read-only.
Failed to mount component: template or render function not defined #20
Description
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// require('laravel-elixir-webpack-official'); require this not show the error
elixir((mix) => {
mix.webpack('app.js');
});
app.js
import Vue from 'vue';
// import Vue from 'vue/dist/vue.js';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);
const app = new Vue({
el: '#app',
render: h => h(App)
});
app.vue
<template>
<div id="app">
<example></example>
<el-button>Hello Element</el-button>
</div>
</template>
<script>
import Example from './components/Example.vue';
export default {
name: 'app',
components: {
Example
}
};
</script>
welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app">
<example></example>
<el-button>Hello</el-button>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component ready.')
}
}
</script>