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.
Related
I've been following a tutorial on youtube on how to make a todolist app (https://www.youtube.com/watch?v=UHSipe7pSac) so far I have experienced a few errors and resolved them searching here, but I couldn't find an answer to why I can't see anything on when running the app. I tried to inspect the element, and specifically, I get this message on the console:
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__ is not a constructor
app.js code:
require('./bootstrap');
import *as Vue from "vue"
import App from "./vue/app.vue"
const app = new Vue(
{
el: '#app',
components: { App }
}
);
welcome.blade.php code:
<body>
<div id="app">
<app></app>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
Any help/insights will be very appreciated.
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?
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 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.