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!
Related
new to vue here and I am creating an area in the code for all my vue components to be rendered through a blade.php file (sfc).
I installed the cli using vue create projectName and linked the file but it seems the tag is causing an issue.
Doesnt Vue need to be wrapped within the template?
let me know if theres any more information needed.
Blade.php
#extends('layouts.admin')
#section('content')
<script src="/projectName/src/App.vue"></script>
#endsection
App.vue
<template id="myStuff">
<div>omg it works?</div>
</template>
<script>
import Vue from 'vue'
new Vue({
el: "#myStuff"
});
</script>
I am using Laravel for a project and would like to switch Vue. This is a sample of my setup right now:-
"routes/web.php"
Route::get('/home', 'HomeController#home');
Route::get('/about', 'HomeController#about');
Route::get('/blogs', 'HomeController#blogs');
"views/master.blade.php"
<!DOCTYPE html>
<html>
<head>
<title>#yield('title')</title>
<!-- AND OTHER STUFF -->
</head>
<body>
<!-- NAV BAR -->
<div id="app">
#yield('content')
</div>
<script src="app.build.js"></script>
</body>
</html>
"views/pages/home.blade.php"
#extends('master')
#section('title', "Home")
#section('content')
<home-content
customproperties="{{ $somedata }}"
></home-content>
#endsection
"app.js"
var vm = new Vue({
data(){
return {
}
},
components: {
HomeContent,
AboutContent,
BlogsContent
}
})
Let's suppose I have all the components ready and working just fine. The problem is, am I doing it the right way? I don't want to make it a single page application for project complexity, instead I want to do it hybrid way. All vue components will have their respective pages, and some pages will not even have a vue component, just a Plain Blade page.
For example, a static page may look like this:-
#extends('master')
#section('title', "Static Page")
#section('content')
Just a static page, it has nothing to do with vue, but still sitting inside Vue instance's template scope.
#endsection
For these pages, the vue script is being loaded and "#app" is getting interpreted as a template. But this page will have no use for vue. Is it good to leave it this way? Or a more optimal way exists for this?
Any suggestions regarding best practices for Laravel-Vue multi page application is welcome.
Hello I have Laravel version 5.7.24. I have problem with import app.js to blade template.
I have app.js in resources/js/app.js, this same file is other location: public/js/app.js
In welcome.blade.php I add:
<body>
<div id="app">
Hello
<example-component></example-component>
<articles></articles>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
I created articles component in resources/js/components/articles.vue:
<template>
<div>
Hello
</div>
</template>
<script>
export default {
name: "Articles"
}
</script>
Now Laravel return me error:
Unknown custom element: - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
Because asset refers to the public/js/app.js
I read in this article, taht Laravel removed assets foler. So I added assets folder and my file structure looks like this:
but still Laravel references the file public/js/app.js.
How I can import srcipt (resources/js/app.js) to my welcome.blade.php file ?
Edit:
my resources/js/app.js file:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles', require('./components/Articles.vue').default);
const app = new Vue({
el: '#app'
});
When I change script from (in welcome.blade.php):
<script src="{{ asset('js/app.js') }}"></script>
to
<script src="{{ asset('assets/js/app.js') }}"></script>
I have error: GET http://127.0.0.1:8000/assets/js/app.js
net::ERR_ABORTED 404 (Not Found)
It looks like you have a mistake in this line of your app.js:
Vue.component('articles', require('./components/Articles.vue').default);
Try removing .default from here, and see if the component is registered correctly when you build again (npm run dev).
Side note: <articles> should contain a hyphen like my-articles, v-articles, or something else.
When using a component directly in the DOM (as opposed to in a string
template or single-file component), we strongly recommend following
the W3C rules for custom tag names (all-lowercase, must contain a
hyphen). This helps you avoid conflicts with current and future HTML
elements.
https://v2.vuejs.org/v2/guide/components-registration.html#Component-Names
I started working with Vue JS and I want to use it in my laravel project. The Laravel version I'm working with is 5.5
I have a vueTest.blade.php. Looks like this:
<html>
<head>
<title>
Vue Test
</title>
<style href="css/app.css" rel="stylesheet"></style>
</head>
<body>
<div id="app">
<example-component></example-component>
<test></test> <<<----- This component is the problem!
</div>
<script src="js/app.js"></script>
</body>
</html>
This comes with laravel and works fine. the test component however is written by me and doesn't work at all. No errors in the console.
At the bottom of the html file, I'm including the app.js ( Thats where vue.js starts in laravel )
The app.js looks like this:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('test', require('./components/Test.vue')); <<--- Thats the only line I addet
const app = new Vue({
el: '#app'
});
And the Test.vue is this:
<template>
<h1>hello</h1>
<p>Bla bla bla</p>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
I tried many things out but nothing worked for me at all. Do I have to register my new components anywhere else? There are no errors in the console and I can't see where the problem is.
Thanks for any help!
Your template needs to have a root element:
<template>
<div>
<h1>hello</h1>
<p>Bla bla bla</p>
</div>
</template>
And better run npm run watch because it needs to compile on every update.
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>