I want to do a reference to a component vue like this link: https://jsfiddle.net/xmqgnbu3/1/.
But, in this code, the code component and js code are in the same page.
I am using laravel with vue and the components are in another folder (link: https://ibb.co/g3CvHz6)
I tried all this, but i have error in the "import" in "require":
#section('contenido')
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="app" class="container">
<matricula ref="matri"></matricula>
</div>
<input type="hidden" id="csrf_token" value="{{ csrf_token() }}" />
<script src="{{ elixir('js/app.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
import MatriculaComponent from '../js/components/MatriculaComponent.vue';
let MatriculaComponent=require('../js/components/MatriculaComponent.vue');
var vm = new Vue({ el: '#app', components: { matricula } });
var vm=$("#app")
function createItem(){
//this.$refs["matri"].Prueba();
//vm.$refs.matri.Prueba();
//vm['my-component'].Prueba();
console.log("la referencia: "+this.$refs.matri.Prueba())
//this.$refs.matricula.Prueba();
}
</script>
#endsection
I expect your help. thanks
The main point is making a vue component and set the template and script there. then, after compile, you can put the component name whatever you want in blade.
FMI, you have to read How to create and deal with vue component in laravel
Related
Im new in Vue.js, so i watched a tones of tutorials and forums for how to render Vue.js component inside Laravel blade and i didnt find any solutions for that.
In my current app.js i render router-view inside App.vue
But when i want try to put router-view inside welcome.blade.php nothing shows...
import './bootstrap';
import {createApp} from 'vue';
import App from './App.vue';
import axios from 'axios';
import router from './router';
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');
and this is my App.vue
<template>
<div class="container">
<NavMenu/>
<router-view></router-view>
</div>
</template>
So what i want is
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ env('APP_NAME') }}</title>
</head>
<body>
<div id="app">
<router-link :to="{ name: 'home' }">
<router-link :to="{ name: 'about' }">
<router-view></router-view>
</div>
#vite('/resources/js/app.js')
</body>
</html>
Already read all posts here on stackoverflow and didnt helps, also Vue or Laravel documentation doesnt have nice explanation.
I would be very grateful if you could help me in further research and my studies.
So VueJS 3 as framework and VueJs 3 used in Laravel Webpack mix are two things differents :
Router is available in VueJS framework
VusJS in Laravel webpack offers you the ability to add custom components like :
in app.js :
const app = createApp({})
app.component('example-component', require('./components/ExampleComponent.vue').default);
and use it in blade <example-component></example-component>
You can create a VueJS fronted Web App and a Laravel project for your backend API so you can benefit from the power of each tool.
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?
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?
My console is
and my app.js is like this
const app = new Vue({
el: '#app',
data: {
msg: 'my new msg'
}
});
and my blade template is like this
<div id="app">
#{{ msg }}
</div>
You are probably not having the component placed inside the blade file.
Add the <example-component></example-component> tag into your home.blade.php or whichever .blade.php file that you are using.
The code to put in your home.blade.php
<script src="{{ mix('js/app.js') }}"></script>
</body>