I have a simple blade with a component inside:
<section>
<h1>Carousel</h1>
<carousel :slides="#json($data->slides)">
</carousel>
The component looks like this:
<template>
<fragment>
<h1>My component</h1>
{{ slides }}
</fragment>
</template>
export default {
props: [
'slides'
],
mounted() {
console.log("mounted")
}
}
And of course I have it in app.js (the path is correct):
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('carousel', require('./components/web/partials/Carousel.vue').default);
const app = new Vue({`
el: '#app',`
});
My webpack.mix.js also contains:
mix.js('resources/js/app.js', 'public/js') .vue() .sass('resources/sass/app.scss', 'public/css');
But when I access the page, I can't see the component. I see just the <h1>Carousel</h1> that is in the blade. Also there are no errors in the console, which I find weird. The "ExampleComponent" that is created after vue install was not rendering either (I removed it from app.js).
I'm using:
"laravel/ui": "^3.3"
"vue": "^3.2.26",
"vue-template-compiler": "^2.6.11"
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue-loader": "^16.2.0"
I have been trying to switch between vue versions, also vue-loader versions, I have been scrolling through SO with similar problems but none of the solutions worked for me.
First, in your app.js, it's how Vue2 init but not Vue3
// vue2 way
new Vue({`
el: '#app',`
});
// vue3 way
Vue.createApp(...).mount('#app')
See how Vue3 init via the hello-word of Vue3.
Second, there is no fragment in Vue3 built-in-components.
Read the document for more details about built-in-components.
In Vue3, you can write a multiple roots component without <fragment> directly
<template>
<h1>My component</h1>
{{ slides }}
</template>
You need to reference app.js in your blade file and add id app to html tag:
<section id="app">
<h1>Carousel</h1>
<carousel :slides="#json($data->slides)"></carousel>
<section>
<script src="{{ mix('css/app.js') }}"></script>
Related
I'm a beginner in VueJS and I wonder how to use a vuejs component from my home.blade.php for example.
Here is my code (I use ViteJS and not Mix)
Card.vue
<template>
<h1>Hello world</h1>
<p>Id : {{ filmId }}</p>
</template>
<script>
export default {
props: ['filmId']
}
</script>
app.js
import './bootstrap';
import { createApp } from "vue";
import App from './App.vue';
createApp(App).mount('#app')
And my home.blade.php :
<div id="app">
<Card />
</div>
#vite('./resources/js/app.js')
You can't use vue components inside of blade files.
If you're using vue, you use vue for ALL of your views.
The only blade file would be your template which loads vue via vite.
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>
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'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!
I am just starting out with Vue and am trying to use two components in a route - a navbar and some sales data. Laravel mix is bundling the assets with Webpack, and npm keeps failing.
index.php
<body>
<div id="app">
<router-view name="nav"></router-view>
<router-view></router-view>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js:
import './bootstrap';
import router from './routes';
const app = new Vue({
el: '#app',
router
});
routes.js:
import VueRouter from 'vue-router';
import Sales from './views/employer/sales/Sales.vue';
import MainNav from './components/MainNav.vue';
let routes = [
{
path: '/sales',
components: {
default: Sales,
nav: MainNav
}
}
];
export default new VueRouter({
routes,
linkActiveClass: 'is-active'
});
Sales.vue
<template>
<p>This is the Sales view</p>
</template>
MainNav.vue
<template>
<p>This is the MAIN NAVIGATION</p>
</template>
The error message from npm is not particularly enlightening:
Failed at the # dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
It goes on to suggest that I should check I am running the latest node and npm (which I am).
What am I doing wrong? Curiously, before attempting to include the navigation component this way, I was registering it as a global component. It seemed to register fine, but whenever I included its element tag in a template, npm would fail in the same manner as above.
Looks like node somehow became confused. I removed the node_modules directory and reinstalled it and its all good.