Vue.js in Laravel - javascript

I am trying to use vue.js with laravel for the first time.
In the blade.php file:
<html>
<body class>
<div id="app">
<favourup></favourup>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
In the app.js file:
Vue.component('favourup', require('./components/Favourup.vue'));
const app = new Vue({
el: '#app',
});
In the vue file:
<template>
<div>
<h2>FavourUp</h2>
</div>
</template>
I am not getting any errors however the local host displays an empty web page when it should display 'FavourUp'

you should write .default at end of require vue components because of part of the vue-loader 15 updates, if your code uses the CommonJS syntax for importing EcmaScript modules, you'll need to append .default:
https://laravel-mix.com/docs/4.0/upgrade#importing-es-modules
but as #Ifaruki said you can import it too here's the code:
// first
Vue.component('favourup', require('./components/Favourup.vue').default);
// second
import Favourup from './components/Favourup.vue';
Vue.component('favourup', Favourup);

Related

Laravel/Vue Send Data between components

We are trying to convert our app from jQuery to Vue in Laravel. One of the option we have is to do components by one since we are can't do everything from scratch.
One of the option is something like this.
require('./bootstrap');
import Vue from "vue"
import bla1 from "./vue/bla1"
import bla2 from "./vue/bla2"
const app = new Vue({
el: '#app',
components: {
bla1,
bla2
}
});
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="app">
<!-- Theres gonna have HTML HERE --->
<bla1 />
<bla2 />
<!-- Theres gonna have HTML HERE --->
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
As you can see, we are just adding seperate components. Is there a way those components can pass data to each other even not under the parent component?
Any input will be appreciated. Thanks

Use Vue.js with ReactiveSearch in existing project

I have an existing web appliction that is not taking advantage of any existing reactive
frameworks or technology (like Angular, Vue or React).
I want use Vue.js with the ReactiveSearch opensource libary without rewriting my whole application.
While working through the tutorial (https://docs.appbase.io/docs/reactivesearch/vue/overview/QuickStart/) I encountered the following problem:
I can't use the components of the ReactiveSearch-Libary and I don't know why.
In my example I want create a multi-list component as described in the tutorial.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#appbaseio/reactivesearch-vue#1.0.0-beta.19/dist/#appbaseio/reactivesearch-vue.umd.js"></script>
</head>
<body>
<div id="app">
<reactive-base app="good-books-ds" credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d">
<h1>Hello from ReactiveBase</h1>
<multi-list
componentId="Authors"
dataField="authors.raw"
class="filter"
title="Select Authors"
selectAllLabel="All Authors"
/>
</reactive-base>
</div>
<script>
import { ReactiveBase } from '#appbaseio/reactivesearch-vue';
Vue.config.productionTip = false;
Vue.use(ReactiveBase);
const vueApp = new Vue({
el: '#app'
})
</script>
</body>
</html>
I get following error message:
SyntaxError: import declarations may only appear at top level of a module

Laravel 5 VueJS not working

I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line
npm install
npm run dev
This commands runs without any errors. When I import the default VUE componet located under ~/ressources/assets/components/ExampleComponent.vue in my template nothing happends.
#section('content')
<example-component></example-component>
#endsection
Here the app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
If you are using Laravel Mix check your webpack.mix.js file, default config must look like this
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, look if you have linked JS file to you blade template
Looks like this for older Laravel versions (<= 5.5):
<script src="{{ asset('js/app.js') }}"></script>
and like this for new once (> 5.5)
<script src="{{ mix('js/app.js') }}"></script>
Finally, see you have
el: '#app'
it mean # - id, like in CSS, VueJS will search for element with id app.
Everything outside that element will not work.
so you have to use it like
<div id='app'>
<example-component></example-component>
</div>
or
<section id='app'>
<example-component></example-component>
</section>
I think you should wrap the container div with an id of app
<div id="app" > <example-component></example-component> </div>
if not just check if the Js files are properly imported in the php file
I also faced this problem and mine is solved. I'm not importing
<script src="{{ asset('js/app.js') }}" defer></script>
check that you are importing js/app.js and #app
It should work for you.
Lol, it was an faceplam question. I've removed the #yield('content') from the layout file. Sorry for that and tanks for help!
check if you are importing app.js
<script src="{{ asset('js/app.js') }}" defer></script>

laravel 5.5 and vue js not working out of box

I have compiled the assets and ran
npm install followed by npm run watch
using the example Vue file that comes build in I changed welcome.blade to
<body>
<div id="app">
<Example></Example>
</div>
<script href="{{URL::asset('js/app.js')}}" charset="utf-8"></script>
</body>
</html>
and also install Vue dev tools and nothing is viewing at all
Example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
What I get on page load
You just need to add
<script src="{{ mix('js/app.js') }}"></script> before de </body> tag.
In this way to are adding the mix that contains the Vue library, components, and so much more.
I Hope this helps.

How to embed widget written by vue into a vue webapp

I'm building a website with Vuejs. I have the code like this
app.js
new Vue({
el: '.page-wrapper',
...
})
index.html
<body>
<div class="page-wrapper">
<!-- content-->
</div>
</body>
Now I want to embed a widget which is built by Vuejs like
<div id="widget"></div>
<script src="https://widget.com/widget.js"></script>
inside page-wrapper class.
I've tried to put the script tag outside the origin Vue component but the content of widget still did not render.
I'm new to Vuejs, could anyone help me out?
I'm just going to take a stab at this...
index.html
<div id="app">
<my-widget></my-widget>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
<script src="https://widget.com/widget.js></script>
<script src="main.js"></script>
main.js
Vue.component('my-widget', {
template: '<div id="widget"></div>'
});
new Vue({
el: '#app'
});
My Vue instance is #app and I'm loading your widget.js asset in index.html. I'm probably completely underestimating this, apologies if that's the case!

Categories

Resources