i can't make run a simple Vue on my Laravel 5.4 project
i have the dependeces in package.json
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.3",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
I have the app.js placed on the webpack.mix
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js');
In my app.js i have:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#contenedorPrincipal'
});
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 mounted.')
}
}
</script>
And in my view, i have a div with id = contenedorPrincipal, in the layout and i call example in a single view..
app.blade.php
<div class="content-page" id="contenedorPrincipal">
<div class="content">
@yield('content')
</div>
in the vie myview.blade.php
@extends('layouts.app')
@section('content')
<div>
<example></example>
</div>
@stop
The npm run watch is working all the time....
When i open this view, nothing display, no error, no vue components detected from vue inspector....
i don't know what is the problem..
My working solution is here at github.
Addition to the packages you installed, I have vue-router installed, which is helpful to create a single page app (SPA)
The files you might want to look at are
resources
|- js/
|- components/
|- Home.vue
|- App.vue
|- app.js
|- routes.js
|- routes/
|- web.php
|- views
|- inventory.blade.php
Hopefully this is helpful.
Fixed, i forget in my app.blade.php
<script src="{{ asset('js/app.js') }}"></script>
Thank you everyone!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.