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>
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.
I have a laravel 8 project and in there I have a main.blade.php file that has #sections and #yield()s content. I have installed vue v2.x and am having issues placing the parent id of the root vue component. I keep getting this error on some pages in my app but not all.
[Vue warn]: Error compiling template:
tag <section> has no matching end tag.
<section class="content">
I can read so of course I check if the section tag it is complaining about has a matching closing tag. It does:
main.blade.php
<div id="app">
<section class="content">
#yield('content')
</section> //matching closing section tag
</div>
resources/app.js
import Vue from "vue";
window.Vue = require('vue');
Vue.component('spinner-button', require('./js/components/spinner-button.vue').default);
const app = new Vue({
el: '#app',
});
A lot of other files using my main.blade.php file via #extends('templates.main')
My component works fine on some pages but on other pages I get the browser error stated above. Where should I place the main app id?
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 not using any vue component in my app i just use app.js file in order to compile my npm packages to my assets js/app.js or css/app.css but i'm getting [Vue warn]: Error compiling template: error in console.
I'm not sure why is that!
Code
app.js file:
require('./bootstrap');
window.Vue = require('vue');
import clipboard from 'clipboard';
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
Layout
<body>
<div id="app">
<div class="container-scroller">
#include('admin.partials.navbar')
#yield('content')
</div>
</div>
</body>
blades
#extends('layouts.admin')
#section('content')
data
#endsection
Any idea?
SOLVED
Yet i'm not sure why but i added Vue.use(clipboard); and it has stopped to show error.
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!