I've tried about everything now but I can't get vue.js to work on Laravel, there doesn't seem to be anything concrete around that says put x in file y to get it working.
I've tried about everything with npm, composer but i can't even get a basic example to work. It's very unclear to me what I need and where it needs to go.
I am using blade to extend from an app.layout view but it's unclear wether i need to add code to assets/js/app.js or just use script src="" tags in my default app layout.
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
} ,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
app.layout.blade.php
<script src="{{asset('/js/app.js')}}"/></script>
..some more html
<body id="app">
<div id="app-5">
<p>#{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
</body>
..more html
why you define two Vue const?
this part of js code is no needed:
const app = new Vue({
el: '#app'
});
remove that line and test it :
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
} ,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
but remmember your vuejs work should be beetween:
<div id="app-5"> vuejs codes should be run here </div>
Don't forget running npm run watch or npm run dev to compile
if you have error and problem with this way you can skip to second way
Second Way:
create vue-script.js file in public/js/ directory
vue-script.js:
var app5 = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
} ,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
create sample.blade.php file in resources/views/ directory
sample.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="app">
#{{ message }}
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="{{ asset('js/vue-script.js') }}"></script>
</body>
</html>
then in routes/web.php:
Route::get('testvue', function() {
return view('sample');
});
and go to url : /testvue in your browser
Related
I try to change the structure of my .vue files (used with laravel) from the working version as seen here:
OLD foo-component.vue:
<script>
Vue.component("foo-component", {
data() {
},
props: {
},
methods: {
},
template: `
<div> Some Content Here </div>
`
});
</script>
switch this to the other structure for .vue files:
NEW: foo-component.vue:
<template>
<div> Some Content Here </div>
</template>
<script>
export default {
name: 'foo-component',
data() {
},
props: {
},
methods: {
},
}
</script>
OLD: main app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
const app = new Vue({
el: '#app',
components: {
OtherComponents
},
data:{
},
methods: {
}
});
NEW: main app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
const app = new Vue({
el: '#app',
components: {
OtherComponents
},
data:{
},
methods: {
}
});
But with that I get an error in the browser saying:
[Vue warn]: Unknown custom element: <foo-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I then added 'foo-component' to the components: {OtherComponents, foo-component} but then things got messy and the browser is saying:
Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)
What am I doing wrong?
Here's the HTML/View where I call the foo-component inside the laravel blade home.blade.php:
<html>
<head>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<foo-component></foo-component>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
You have to register your components in app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
The way I got it working is an update to app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
import FooComponent from './components/foo-component.vue';
const app = new Vue({
el: '#app',
components: {
OtherComponents,
'foo-component': FooComponent
},
data:{
},
methods: {
}
});
I am using VueJS with Laravel, when I create Vue component and export it, it works perfect, but when I use export default in my Laravel blade in script #section it's not working.
App.js
require('./bootstrap');
window.Vue = require('vue');
// import 'swiper/dist/css/swiper.css'
import Buefy from 'buefy'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueMatchHeights from 'vue-match-heights'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('vehicle-offers-block', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('latest-news-block', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('finance-calculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('latest-offers-block', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('all-companies-block', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('brand-vehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('model-topCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('model-insideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('trim-specifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('all-offers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('main-footer', require('./components/frontend/MainFooter.vue'));
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));
Vue.use(VueAwesomeSwiper)
Vue.use(Buefy)
Vue.use(VueMatchHeights);
const app = new Vue({
el: '#app'
});
App.blade.php
Here I created by scripts section
<body>
<!-- START NAV -->
#include ('admin.layouts.topnav')
<!-- END NAV -->
<div class="container">
<div class="columns">
<div class="column is-3">
#include ('admin.layouts.sidenav')
</div>
<div class="column is-9">
<div id="app">
#yield('content')
</div>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
#yield('scripts')
</div>
</body>
Larave Blade File
Here i am exporting vue js in laravel blade
#section('scripts')
<script>
export default {
data() {
return {
companyid: "",
offers: {},
SigleOfferCoverSwiper: {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
mounted () {
this.getOffers();
},
methods: {
getOffers () {
axios.get(`/api/brands/${this.companyid}/offers`).then(response => {
this.offers = response.data.offers
})
}
}
};
</script>
#endsection
Please guy help me with this.
Thanks
Seems you need to setup default for your require declaration:
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue').default);
Because in some cases you can face some problems with ES6 export.
Also you can use module.exports = {}.
When I changed mode to history, the hash from the URL is removed, but components are not loading. This is app.js:
window.Vue = require('vue');
import VueRouter from 'vue-router';
var index = Vue.component('index',
require('./components/frontend/testingIndexComponent.vue'));
var component1 = Vue.component('component1',
require('./components/frontend/testingComponent.vue'));
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: index },
{ path: '/component1', component: component1 }
]
})
const app = new Vue({
router
}).$mount('#app')
this is web.php
Route::get('/{vue_capture?}', function () {
return view('index4');
})->where('vue_capture', '[\/\w\.-]*');
this is index4.blade.php
<body>
<div>
<h1>Header</h1>
<!-- <a><router-link tag="li" to="projects">
sdds
</router-link></a> -->
</div>
<div id="app">
<a><router-link to="component1">
sddsdadadssa
</router-link></a>
<router-view>
</router-view>
</div>
<div>
<h1>Footer</h1>
</div>
<script type="text/javascript" src="{{URL::to('public/js/app.js')}}">
</script>
remove
mode: 'history'
and use
hashbang: false,
history: true
instead
I'm starting to work with vuejs and I'm trying to make a http get call without sucess. I've tried several example showing how to do that but I get the following error in my console: this.$http is undefined.
html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p v-bind:title='message'>
{{ message }}
<p>
<button v-on:click='changeView("matrice")'>get data</button>
</div>
</body>
<script type="text/javascript" src="/front/lala_web/matrice.js"></script>
</html>
js
var app = new Vue({
el: '#app',
data: {
message: 'Empty data'
},
methods:{
changeView: function(v){
this.$http.get('/view/'+v)
.then(function(resp){
this.message = resp.data;
})
.catch(function(){alert('Error')});
}
}
})
I'been able to get a http get call working using the following js, but doing so doesn't change data.message value of vuejs and I get the following error data is not defined.
js
var app = new Vue({
el: '#app',
data: {
message: 'Empty data'
},
methods:{
changeView: function(v){
var viewUrl = '/view/'
$.ajax({
url: viewUrl+v,
method: 'GET',
success: function (resp) {
if (resp.error == false){
console.log(resp)
data.message = resp.data
}
},
error: function (error) {
console.log(error)
}
});
}
}
})
You need to reference this.message not data.message. Also, you'll need to save a reference to this outside the scope of the ajax call, since this in the success handler doesn't refer to the Vue instance:
changeView: function(v){
var viewUrl = '/view/'
var self = this;
$.ajax({
url: viewUrl+v,
method: 'GET',
success: function (resp) {
if (resp.error == false){
console.log(resp)
self.message = resp.data
}
},
error: function (error) {
console.log(error)
}
});
}
I'm using Vue in Laravel 5.3. I have already worked with Laravel 5.2. But Laravel 5.3 and Vue.js is new for me. So I'm playing with these pair. I have completed Laravel Passport tutorial successfully. Now what I want to do is put my html template in blade file and js code in Vue component. But I'm getting this error:
[Vue warn]: Failed to mount component: template or render function not defined. (found in component )
So I can't understand reason of this error as I'm new in Vue.js. If any one knows answer, it will be appreciated. Here is my code.
Blade file
<body>
<div id="app">
<tasks></tasks>
</div>
<template id="tasks-template">
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
#{{task.body}}
</li>
</ul>
</template>
<script src="/js/app.js"></script>
</body>
/resources/assets/js/app.js
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
el: '#app'
});
/resources/assets/js/components/Tasks.js
export default {
template: '#tasks-template',
data: function () {
return {
list: ''
};
},
created: function() {
this.$http.get('/api/tasks').then((response) => {
this.list = response.body;
}, (response) => {
alert(0);
});
}
}
UPDATE
Blade file
<body>
<div id="app">
<tasks></tasks>
</div>
</body>
/resources/assets/js/components/Tasks.js
template: require('../components/tasks-template.html'),
instead of
template: '#tasks-template'
/resources/assets/js/components/tasks-template.html
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body}}
</li>
</ul>
But now getting this error.
Uncaught Error: Module parse failed: /var/www/html/casesync/resources/assets/js/components/tasks-template.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|
|
| #{{task.body}}
Lets say you have your template file as
/* resources/assets/js/components/tasks.template.html */
<div class="tasks-component component">
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body}}
</li>
</ul>
</div>
Then the Tasks.js would be
/* resources/assets/js/components/Tasks.js */
export default {
template: require('./tasks.template.html'),
data: function () {
return {
list: ''
};
},
created: function() {
this.$http.get('/api/tasks').then((response) => {
this.list = response.body;
}, (response) => {
alert(0);
});
}
}
The you can have your app.js as
/* app.js */
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks').default);
const app = new Vue({
//el: '#app'
}).$mount('#app');
//your main index.php or entry point could be
<body>
<div id="app">
<tasks></tasks>
</div>
</body>
UPDATE
For the default/out-of-box webpack configuration to work on Laravel5.3, you will need to pull in html-loader through npm
npm install html-loader --save-dev
Then in the gulpfile.js - specify html-loader to be used for .html files.
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
const config = {
module: {
loaders:[
{
test: /\.html$/,
loader: 'html'
}
]
}
};
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js', null, null, config);
});
Finally you can register global components in your main/entry file app.js as
Vue.component('test-component', require('./test-component').default);
/* Or using ES2015 import */
import TestComponent from './test-component';
Vue.component('test-component', TestComponent);
I got help from #Alfa here
It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.
I had the same problem importing a vue component.
You have to change
Vue.component('tasks', require('./components/Tasks'));
change it to
Vue.component('tasks', require('./components/Tasks').default);