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.
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'm following this simple Crud tutorial for Vue + Laravel and everything in Laravel part seems fine (from creating controllers & models) seems fine but I can't make vue show up in Laravel welcome blade. Here's my code:
app.js file
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import { routes } from './routes';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
App.vue file:
<template>
<div class="container">
<h2>Vue app</h2>
<router-view> </router-view>
</div>
</template>
<script>
export default {}
</script>
and this is the welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app"> </div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
<h2>The welcome blade</h2>
</body>
</html>
edit: answer added below, basically followed another tutorial
Looking at the code after composer require laravel/ui and php artisan ui vue I see small change that may affect the execution of code.
Originally the Laravel setup creates window.Vue = require('vue').default;, but your code has window.Vue = require('vue')
Firstly, try this:
<script src="{{ asset('js/app.js') }}" defer></script>
Secondly, you may need a router view element inside the div with id app. I can't say for sure since I don't know your routes. If the change above doesn't solve the problem, add router view like
<div id="app">
<router-view />
</div>
UPDATE
Another thing to try. Remove these lines
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
because you have axios on bootstrap.js file.
And make sure there is no error message on the console.
So it must have been something wrong with my installation process because I followed another tutorial and now it's working video
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?
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!