I'm trying to migrate my jQuery to Vue framework instead, I'm using Laravel 5.6 with webpack to build my project, but my Vue ponents are not showing up.
when I run mand npm run dev I successfully build the project:
After that I use php artisan serve to show the web in my browser which it does but NONE of the ponents show up.
When I check source code this is what the ponent renders:
but for some reason I can't see the ponent?
This is my app.js file:
/**
* 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 ponents to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vueponent('related-post-list', require('./ponents/RelatedPostList.vue'));
Vueponent('example-ponent', require('./ponents/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
My webpack file:
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 piling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Bootstrap file
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headersmon['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a mon header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
let ajaxEncoding = 'multipart/form-data';
console.log("'Ajax encoding is ${ajaxEncoding}'");
axios.defaults.headers.post['Content-Type'] = ajaxEncoding;
if (token) {
window.axios.defaults.headersmon['X-CSRF-TOKEN'] = token.content;
console.log('CSRF token found');
} else {
console.error('CSRF token not found: ');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
My ponent:
<template>
<div class="sidebar_related_container" style="">
<span class="sidebar_related_title" style="">Temas Relacionados</span>
<div class="sidebar_related_content_container" v-for="post in relatedPosts" :key="post.id" style="">
<a class="sidebar_related_content_image" :href="'/conducta-canina/${post.slug}'" :style="'background-image:url(${post.slug});'">
<div class="black_gradient" style=""></div>
</a>
<div class="sidebar_related_content_text_container" style="">
<span class="sidebar_related_content_text_title" style="">{{ post.postcategory.name }}</span>
<span class="sidebar_related_content_text_description" style="">{{ post.title }}</span>
</div>
</div>
</div>
</template>
<!--SCRIPTS-->
<script>
export default
{
name: 'RelatedPostList',
props: {
post: {required:true}
},
data: function () {
return {
relatedPosts: null,
id: this.post.id,
category : this.post.postcategory.name
}
},
mounted () {
console.log("'${this.$options.name} ponent succesfully mounted'");
axios.post("/posts/related", this.id, this.category)
.then(response => (this.relatedPosts = response.data.relatedPosts))
.catch(error => console.log(error));
},
methods: {
},
}
</script>
<!--STYLES-->
<style scoped>
.sidebar_related_container{width:100%; height:auto; display:flex; flex-direction:column;}
.sidebar_related_title{width:100%; height:75px; font-size:16px; color:#454545; font-weight:600; display:flex; align-items:center;}
.sidebar_related_content_container{width:100%; height:auto; display:flex; flex-direction:column; margin:15px 0px;}
.sidebar_related_content_image{width:100%; height:180px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); position:relative; background-size:cover; margin-bottom:3px;}
.sidebar_related_content_text_container{width:100%; height:30%; display:flex; flex-direction:column;}
.sidebar_related_content_text_title{font-size:15px; color:var(--main_color); font-weight:900; margin:5px 0px;}
.sidebar_related_content_text_description{font-size:13px; color:rgba(0,0,0,0.7); font-weight:500; margin:5px 0px; line-height:20px;}
@media only screen and (max-width: 736px)
{
.sidebar_container{width:100%; height:auto; padding-left:0px; padding-bottom:0px; padding-top:20px; position:relative;}
.sidebar_stripe_white{width:15px; height:40px; background-color:white; position:absolute; top:0px; left:-10px; display:none;}
.sidebar_related_container{width:100%; height:auto; display:flex; flex-direction:column; }
.sidebar_related_title{width:100%; height:auto; font-size:16px; color:#454545; font-weight:600; display:flex; align-items:center; margin:15px 0px;}
.sidebar_related_content_container{width:100%; height:auto; display:flex; flex-direction:column; align-items:center; margin:15px 0px;}
.sidebar_related_content_image{width:100%; height:155px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); position:relative; background-size:cover; margin-bottom:3px;}
.sidebar_related_content_text_container{width:100%; height:20%; display:flex; flex-direction:column;}
.sidebar_related_content_text_title{font-size:15px; color:var(--main_color); font-weight:900; margin:5px 0px;}
.sidebar_related_content_text_description{font-size:13px; color:rgba(0,0,0,0.7); font-weight:500; margin:5px 0px; line-height:20px;}
}
</style>
And my blade templates:
<div class="sidebar_container" style="">
<div class="sidebar_stripe_white" style=""></div>
<related-post-list :post="@json($classPost)"></related-post-list>
<!--<example-ponent></example-ponent>-->
<!--@include('partials/sidebar/contact_form')-->
</div>
this file is inside my master layout where the body tag has "app" identifier:
<body id="app" class="">
//sidebar
</body>
I'm trying to migrate my jQuery to Vue framework instead, I'm using Laravel 5.6 with webpack to build my project, but my Vue ponents are not showing up.
when I run mand npm run dev I successfully build the project:
After that I use php artisan serve to show the web in my browser which it does but NONE of the ponents show up.
When I check source code this is what the ponent renders:
but for some reason I can't see the ponent?
This is my app.js file:
/**
* 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 ponents to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.ponent('related-post-list', require('./ponents/RelatedPostList.vue'));
Vue.ponent('example-ponent', require('./ponents/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
My webpack file:
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 piling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Bootstrap file
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.mon['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a mon header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
let ajaxEncoding = 'multipart/form-data';
console.log("'Ajax encoding is ${ajaxEncoding}'");
axios.defaults.headers.post['Content-Type'] = ajaxEncoding;
if (token) {
window.axios.defaults.headers.mon['X-CSRF-TOKEN'] = token.content;
console.log('CSRF token found');
} else {
console.error('CSRF token not found: https://laravel./docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
My ponent:
<template>
<div class="sidebar_related_container" style="">
<span class="sidebar_related_title" style="">Temas Relacionados</span>
<div class="sidebar_related_content_container" v-for="post in relatedPosts" :key="post.id" style="">
<a class="sidebar_related_content_image" :href="'/conducta-canina/${post.slug}'" :style="'background-image:url(${post.slug});'">
<div class="black_gradient" style=""></div>
</a>
<div class="sidebar_related_content_text_container" style="">
<span class="sidebar_related_content_text_title" style="">{{ post.postcategory.name }}</span>
<span class="sidebar_related_content_text_description" style="">{{ post.title }}</span>
</div>
</div>
</div>
</template>
<!--SCRIPTS-->
<script>
export default
{
name: 'RelatedPostList',
props: {
post: {required:true}
},
data: function () {
return {
relatedPosts: null,
id: this.post.id,
category : this.post.postcategory.name
}
},
mounted () {
console.log("'${this.$options.name} ponent succesfully mounted'");
axios.post("/posts/related", this.id, this.category)
.then(response => (this.relatedPosts = response.data.relatedPosts))
.catch(error => console.log(error));
},
methods: {
},
}
</script>
<!--STYLES-->
<style scoped>
.sidebar_related_container{width:100%; height:auto; display:flex; flex-direction:column;}
.sidebar_related_title{width:100%; height:75px; font-size:16px; color:#454545; font-weight:600; display:flex; align-items:center;}
.sidebar_related_content_container{width:100%; height:auto; display:flex; flex-direction:column; margin:15px 0px;}
.sidebar_related_content_image{width:100%; height:180px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); position:relative; background-size:cover; margin-bottom:3px;}
.sidebar_related_content_text_container{width:100%; height:30%; display:flex; flex-direction:column;}
.sidebar_related_content_text_title{font-size:15px; color:var(--main_color); font-weight:900; margin:5px 0px;}
.sidebar_related_content_text_description{font-size:13px; color:rgba(0,0,0,0.7); font-weight:500; margin:5px 0px; line-height:20px;}
@media only screen and (max-width: 736px)
{
.sidebar_container{width:100%; height:auto; padding-left:0px; padding-bottom:0px; padding-top:20px; position:relative;}
.sidebar_stripe_white{width:15px; height:40px; background-color:white; position:absolute; top:0px; left:-10px; display:none;}
.sidebar_related_container{width:100%; height:auto; display:flex; flex-direction:column; }
.sidebar_related_title{width:100%; height:auto; font-size:16px; color:#454545; font-weight:600; display:flex; align-items:center; margin:15px 0px;}
.sidebar_related_content_container{width:100%; height:auto; display:flex; flex-direction:column; align-items:center; margin:15px 0px;}
.sidebar_related_content_image{width:100%; height:155px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); position:relative; background-size:cover; margin-bottom:3px;}
.sidebar_related_content_text_container{width:100%; height:20%; display:flex; flex-direction:column;}
.sidebar_related_content_text_title{font-size:15px; color:var(--main_color); font-weight:900; margin:5px 0px;}
.sidebar_related_content_text_description{font-size:13px; color:rgba(0,0,0,0.7); font-weight:500; margin:5px 0px; line-height:20px;}
}
</style>
And my blade templates:
<div class="sidebar_container" style="">
<div class="sidebar_stripe_white" style=""></div>
<related-post-list :post="@json($classPost)"></related-post-list>
<!--<example-ponent></example-ponent>-->
<!--@include('partials/sidebar/contact_form')-->
</div>
this file is inside my master layout where the body tag has "app" identifier:
<body id="app" class="">
//sidebar
</body>
- How do you include app.js and app.css in your blade? – Sølve Commented Oct 24, 2018 at 18:57
4 Answers
Reset to default 2you have to load your /resources/js/app.js file.
put this inside your <head></head> tag
<script src="{{ asset('js/app.js') }}" defer></script>
Some time you have re install npm
npm install
npm run dev
Thats solved my problem.
:post="@json($classPost)" is your issue. @json doesn't escape the output for use in a HTML attribute, which is why your screenshot of the source in the browser has that line in bright red - it's invalid (because of the " characters in the resulting JSON, which end the attribute prematurely).
This'll do the trick:
:post="{{ json_encode($classPost) }}"
I think you need to load app.js before </body> as below.
<body id="app" class="">
//sidebar
<script src=" {{ mix('js/app.js') }} "></script>
</body>