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 = {}.
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'm trying to import the vuejs-datepicker in my template, but it is not working. I don't see any result and if I look in the console it says: Uncaught SyntaxError: Unexpected identifier. Am I doing something wrong? Is it that a import is not possible in a blade-template?
registration.blade.php:
#section('content')
...
<div class="col-lg-3 col-md-6">
<div class="form-group">
<label for="yearOfBirth">YEAR OF BIRTH*</label>
<datepicker></datepicker>
</div>
</div>
...
#endsection('content')
#endsection('content')
#section('scripts')
<script>
import Datepicker from 'vuejs-datepicker';
new Vue({
el: '#form',
data: {
name: 'Your horse',
items: []
},
methods: {
addVideo(){
this.items.push({
value: ''
});
},
deleteVideo(index){
this.items.splice(index,1);
}
},
components: {
Datepicker: Datepicker
}
});
</script>
#endsection
Found the solutions. It was in Webpack where all the scripts where in mix.scripts, while this JS-file needs to be in mix.js.
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
I am trying to use Vue Multiselect V2 in my Laravel 5.3 project. I am using this example, http://monterail.github.io/vue-multiselect/#sub-single-select
I have the following setup, in my app.js file:
Vue.component('multiselect', require('./components/Multiselect.vue'));
var vm = new Vue({
el: '#app'
});
In the Multiselect.vue file
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: '',
options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
}
}
}
</script>
And I am calling it in the blade as below:
<div id="app">
<label class="typo__label">Single select</label>
<multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
<pre class="language-json"><code>#{{ value }}</code></pre>
</div>
This is how it displays in the DOM
<div id="app">
<label class="typo__label">Single select</label>
<!---->
<pre class="language-json"><code></code></pre>
</div>
Currently the dropdown does not display, and I don't see any errors in the console. I would have expected to add a template in somewhere but I couldn't find any mention of that in the Vue Multiselect docs.
For anyone having these issues, do not follow the examples on the official documentation. They do not work, rather use this from their Github page. https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage
Basic example
<template>
<div>
<multiselect
v-model="selected"
:options="options">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
selected: null,
options: ['list', 'of', 'options']
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
For updating the array from vue multiselect use #select and #remove events
Example: <multiselect #select="selectionChange" #remove="removeElement"> </multiselect>
Into methods add the next functions
methods: {
removeElement() {
this.$forceUpdate();
},
selectionChange() {
this.$forceUpdate();
},
}
this.$forceUpdate(); will update the state.
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);