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>
Related
I am new to Vue js i am practicing for loop in vue js
When i try to fetch data from my app js file into my welcome blade file it displays the exact same variable that i wrote in code instead of showing value stored in the object.
Here is my code of app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
data: {
message: '',
tasks: [
{ name: 'Foo' },
{ name: 'Bar' }
]
}
});
and this is my welcome blade file code
links
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/app.js"> </script>
and the list i want to repeat
<div class="title m-b-md" id="app">
<ul>
<li v-for="task in tasks" >
#{{ task.name }}
</li>
</ul>
<example></example>
</div>
<div class="title m-b-md" id="app">
<ul>
<li v-for="(task,index) in tasks" :key="task.name">
#{{ task.name }}
</li>
</ul>
<example></example>
</div>
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 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
I import the vue-route to my app.js in my laravel vue website. Sadly, there's an error. Can you please guide me thanks
app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{path: '/', component: require('./components/Welcome.vue') }
]
const router = new VueRouter({
mode: 'history',
routes
})
const app = new Vue({
el: '#app',
router,
});
master.blade.php
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
<div id="app">
#yield('content')
</div>
</body
welcome.blade.php
#extends('layouts.master')
#section('content')
<router-view></router-view>
<vue-progress-bar> </vue-progress-bar>
#endsection
The result should be the Welcome.vue will display.
If you use a newer version of Vue.js you should have .default to require('./components/Welcome.vue')
So line 5 would look like this
{path: '/', component: require('./components/Welcome.vue').default }
Stack Overflow: Why need default after require() method in Vue?
As per documentation, you should inject router option to make your whole app router aware.
So you should have something like this:
const app = new Vue({
router
}).$mount('#app')
I think this is duplicate of this.
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!