I have set up my whole project and started valet.
In my view at the bottom I import the JS file and use mix for it to reload:
<script src="{{ mix('js/app.js') }}"></script>
The issue comes into play when I try to bind anything, it just does not reflect on valet. It works with a regular artisan serve but I need valet.
Example:
<template>
<div>
<input v-model="text" />
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
data() {
return {
text: '',
}
},
</script>
The text will not appear or update with Valet. Is it something I am doing wrong? I have no errors in the console. I am running npm run watch and it builds successfully each time.
Related
I created a Vue component using laravel 5.8, but the console gives me this error.
<front-check-user> - did you register the component correctly? For recursive components, make sure to provide the "name" option
Before creating this component I already created 20 and never had this error.
File app.js
Vue.component('front-check-user', require('./components/frontend/CheckUserEmail').default);
CheckUserEmail component
<template>
<div>
<h3>Test</h3>
</div>
</template>
<script>
export default {
name: "CheckUserEmail"
}
</script>
<style scoped>
</style>
I am trying to set up laravel scout with Algolia.
I am following Algolia indications from:
https://www.algolia.com/doc/framework-integration/laravel/searching/client-side-search/?language=php
The problem I am facing is when I try to use VUE in the blade with the following code:
......
<script src="{{ asset('public/js/app.js') }}"></script> <!-- I have tried async too -->
......
<div id="app">
<!-- In a default Laravel app, Vue will render inside an #app div -->
<ais-instant-search
:search-client="searchClient"
index-name="{{ (new App\Article)->searchableAs() }}"
>
<ais-search-box placeholder="Search articles..."></ais-search-box>
<ais-hits>
<template slot="item" slot-scope="{ item }">
<div>
<h1>#{{ item.title }}</h1>
<h4>#{{ item.summary }}</h4>
</div>
</template>
</ais-hits>
</ais-instant-search>
</div>
<script>
new Vue({
data: function() {
return {
searchClient: algoliasearch(
'{{ config('scout.algolia.id') }}',
'{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Article::class) }}',
),
};
},
el: '#app',
});
</script>
And my app.js looks like this:
window.Vue = require('vue');
import algoliasearch from 'algoliasearch/lite';
window.algoliasearch = algoliasearch;
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
I have been reading online load of stuff about the same issue but it does not matter what I try the Vue is not recognized:
Uncaught ReferenceError: Vue is not defined
Vue can start in app.js because I tried but I need it on the blade because as you can see I need to print some algolia info. Ideas?
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.
Am new to laravel and VUe js, after a fresh installation of laravel 5.4 it comes with an example vue component that am trying to render in a blade file but it fails
IN the folder resources/assets/js/components/Example.vue i have
<template>
<div class="container">
Testing component
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Then i the folder resources/assets/js/app.js i have
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
Then in the welcome.blade.php i have
<div id="app">
<example></example>
</div>
THe above component is not rendered, i have also run
npm run watch
Where am i going wrong?
So for the future visitors to this question the problem was that the vue.js was not loaded on the page where the code was written. So always make sure that you check if you are loading your libraries where you need them.
I had the same problem with this particular example. I have found that in the default welcome.blade.php file that VueJS requires and the VueJS library are not present. Hence what I did was:
In file welcome.blade.php add the bolded lines:
<body>
**<div id="app">**
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
SAGACE
</div>
<example></example>
</div>
**</div>**
<!-- Scripts -->
**<script src="{{ asset('js/app.js') }}"></script>**
</body>
Hence this view will have access to the app.js where all components are and now can be rendered properly, as pointed out by lewis4u