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>
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>
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?
I am learning Vue and got stuck trying setup it as full front-end with Laravel, on my scenario I already have made an personal blog for test using Laravel with Blade engine and some components of Vue and seems work fine.
I am trying get on next level, removing Blade and letting Laravel as API backend and setup Vue as full front end with SSR, the basic setup works, I mean I can call Vue, render it using SSR with node or PHPv8, the problem I am having is on route systems, thinking as blade way I can't archive same result, on blade I use an default layout as master and import it for every post, page, blog, etc...
Example:
resources/views/layouts/master.blade
<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">
<head>
#include('partials._head')
</head>
#if(View::hasSection('body')) {{-- Load Custom Body --}}
<body #section('body')>
#else
<body>
#endif
#yield('content')
#include ('partials._javascripts')
#section('scripts')
</body>
</html>
So I call a dynamic head per page / post, a dynamic content, an basic javascripts (bootstrap, vue, fontawesome, etc...) and custom 'scripts' per page / posts.
Using the librarie:
https://github.com/spatie/laravel-server-side-rendering
I can get SSR working with node or PHPv8, but the vue-route never call the desired page, my setup is:
resources/assets/js/app.js
import Vue from 'vue';
import App from './layouts/App';
import axios from 'axios';
import store from './store';
import router from './router';
import navbar from './components/navbar';
import posts from './components/posts';
import sidebar from './components/sidebar';
import footer from './components/footer';
import BlogIndex from './views/blog/BlogIndex';
export default new Vue({
store,
router,
navbar,
posts,
sidebar,
footer,
BlogIndex,
render: h => h(App),
});
resources/assets/js/entry-client.js
import app from './app';
app.$mount('#app');
resources/assets/js/entry-server.js
import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';
app.$router.push(context.url);
renderVueComponentToString(app, (err, html) => {
if (err) {
throw new Error(err);
}
dispatch(html);
});
resources/assets/js/router.js
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home';
import BlogIndex from './views/blog/BlogIndex';
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/blog', name: 'blog', component: BlogIndex },
];
export default new VueRouter({
mode: 'history',
routes,
});
resources/assets/js/store.js
import Vue from 'vue';
import uniq from 'lodash/uniq';
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);
export default new Store({
state: {
},
getters: {
},
mutations: {
},
});
resources/assets/js/views/blog/BlogIndex.vue
<template>
<div class="container">
<navbar></navbar>
<posts></posts>
<sidebar></sidebar>
<footer></footer>
</div>
</template>
<script>
export default {
name: "BlogIndex",
components: {
}
}
</script>
<style scoped>
</style>
app/Http/Controllers/VueSSRController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
use Illuminate\Routing\Route;
class VueSSRController extends Controller
{
public function __invoke()
{
return view('layouts.vue');
}
}
resources/views/layouts/vue.blade.php
<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">
<head>
#section('extrajavascripts'){{ asset('js/scripts.min.js') }}#endsection
#include('partials._head')
</head>
#if(View::hasSection('body')) {{-- Load Custom Body --}}
<body #section('body')>
#else
<body>
#endif
{{-- Begin of Vue SSR --}}
{!! ssr('resources/assets/js/server_bundle.min.js')
// Share the packages with the server script through context
//->context('packages', $packages)
// If ssr fails, we need a container to render the app client-side
->fallback('<div id="app"></div>')
->render() !!}
{{-- End of Vue SSR --}}
#include ('partials._javascripts')
#section('scripts')
#show
</body>
</html>
/resources/assets/js/layouts/App.vue
<template>
<div id ="app">
{{ message }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: 'SSR working.'
}
}
}
</script>
<style scoped>
</style>
So SSR works fine, the problem is the resources/assets/js/router.js is not loading the resources/assets/js/views/blog/BlogIndex.vue, the url/blog works, but the component rendered is always the /resources/assets/js/layouts/App.vue.
Someone would point what I am missing setup please?
Thanks in advice!!!
You should place <router-view></router-view> where you want the router to load. I think in your case its below {{message}} in App.vue
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