Am new to laravel and VUe js, after a fresh installation of laravel 5.4 it comes with an example vue component that am trying to render in a blade file but it fails
IN the folder resources/assets/js/components/Example.vue i have
<template>
<div class="container">
Testing component
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Then i the folder resources/assets/js/app.js i have
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
Then in the welcome.blade.php i have
<div id="app">
<example></example>
</div>
THe above component is not rendered, i have also run
npm run watch
Where am i going wrong?
So for the future visitors to this question the problem was that the vue.js was not loaded on the page where the code was written. So always make sure that you check if you are loading your libraries where you need them.
I had the same problem with this particular example. I have found that in the default welcome.blade.php file that VueJS requires and the VueJS library are not present. Hence what I did was:
In file welcome.blade.php add the bolded lines:
<body>
**<div id="app">**
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
SAGACE
</div>
<example></example>
</div>
**</div>**
<!-- Scripts -->
**<script src="{{ asset('js/app.js') }}"></script>**
</body>
Hence this view will have access to the app.js where all components are and now can be rendered properly, as pointed out by lewis4u
Related
I am developing a single page application (SPA) using Laravel and VueJs. Where the index.blade.php page looks like:
<html>
<head>
<link rel="stylesheet" href="/css/app.css" />
</body>
<body>
<div id="app">
<layout></layout>
</div>
<script src="/js/app.js"></script>
</body>
</html>
The layout.vue component looks like:
<template>
<div>
<input type="text" #keyup="search" />
<router-view></router-view>
</div>
</template>
<script>
import router from 'router'
export default {
data() {
return {
popover: false
}
},
methods: {
search: function (e) {/*Ajax code to search*/}
}
}
</script>
Everything is working fine except slower page loading at first. I see a white page until javascript works. So I've decided to put some html code in index.blade.php. I want to put the html from layout.vue page to index.blade.php so that I can see the html layout before javascript loads. How can I properly merge layout.vue with index.blade.php so that #keyup method works?
i am using Laravel v8 Livewire.
I have a blade with
<select name="event_id" id="event_id" size="" class="form-control" onchange="ChangeDescription">
the layout file has
</head>
<body>
#yield('content')
#stack('scripts')
#livewireScripts
</body>
And the blade has
#extends('layouts.layout')
#section('content')
#push('head')
<!-- Scripts -->
<script src="{{ asset('../../resources/js/ChangeDescription.js')}}"></script>
#endpush
<div class="container">
...
For testing purposes the function has only one line:
function changeDescription() {alert('changeDescription');}
According to W3Schools, (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange),
the event should fire when one of the values is clicked.
So, what do I have to do to get the event to fire off?
I have set up my whole project and started valet.
In my view at the bottom I import the JS file and use mix for it to reload:
<script src="{{ mix('js/app.js') }}"></script>
The issue comes into play when I try to bind anything, it just does not reflect on valet. It works with a regular artisan serve but I need valet.
Example:
<template>
<div>
<input v-model="text" />
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
data() {
return {
text: '',
}
},
</script>
The text will not appear or update with Valet. Is it something I am doing wrong? I have no errors in the console. I am running npm run watch and it builds successfully each time.
My console is
and my app.js is like this
const app = new Vue({
el: '#app',
data: {
msg: 'my new msg'
}
});
and my blade template is like this
<div id="app">
#{{ msg }}
</div>
You are probably not having the component placed inside the blade file.
Add the <example-component></example-component> tag into your home.blade.php or whichever .blade.php file that you are using.
The code to put in your home.blade.php
<script src="{{ mix('js/app.js') }}"></script>
</body>
I'm trying to build an application on Laravel 5.4 and Vue JS 2.0 I'm having a set of components which are being used in specific page only, right now I'm defining the components globally and using the components tag in blade file, as I said lot components are of no use, so my mix file is getting bigger and I think this might slow down my page rendering. I'm looking for a solution where I can call components dynamically in blade file. Following is my app.js file:
Vue.component('NavBar', require('./components/NavBar.vue'));
Vue.component('HomeBanner', require('./components/HomeBanner.vue'));
Vue.component('PageFooter', require('./components/Footer.vue'));
Vue.component('Categories', require('./components/Categories.vue'));
Vue.component('SubCategory', require('./components/SubCategory.vue'));
const app = new Vue({
el: '#app'
});
I've a master blade file which have following HTML codes:
<div id="app">
<nav-bar></nav-bar>
#yield('content')
<div class="clearfix"></div>
<page-footer></page-footer>
</div>
<!-- Core Scripts for Vue Components -->
<script src="{{ asset('js/app.js') }}"></script>
and suppose in index.blade.php I've
#extends('layouts.master')
#section('title', 'HomePage')
#section('content')
<home-banner></home-banner>
#endsection
and in categories page I'm having:
#extends('layouts.master')
#section('title', 'Select your category')
#section('content')
<categories></categories>
#endsection
any suggestion how to achieve this.
Try this:
Create a new file, say, partial.js at the same level of your app.js with this:
window.Vue = require('vue');
Vue.component('categories', require('./components/Categories.vue'));
new Vue({
el: '#testing'
});
Add the partial.js to the elixir webpack in gulpfile.js. Should look like this:
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js')
.webpack('partial.js');
});
Then in the blade file you want to have this enclose the 'category' tag between a div with id='testing'
After that, import the partials.js script like this:
<script src="/js/partials.js"></script>
I believe the importing here has to be done AFTER using the category component.
Your categories page should end up like this:
#extends('layouts.master')
#section('title', 'Select your category')
#section('content')
<div id='testing'>
<categories></categories>
</div>
<script src="/js/partials.js"></script>
#endsection
Try it out and let me know, that's how I solved a similar problem in the past. Cheers!