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!
Related
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
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);
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
I have a problem because template from Vue.js is not showing in blade.php. I did all step by step from this tutorial https://www.itechempires.com/2017/10/laravel-5-5-vuejs-2-0-crud-operations-application/ and it's not working.
My code:
Roster.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Roster</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
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-component', require('./components/ExampleComponent.vue'));
Vue.component('roster', require('./components/Roster.vue'));
const app = new Vue({
el: '#app'
});
Roster blade:
#extends('layouts.admin.dashboard')
#section('content')
<task></task>
#endsection
I ran gulp watch and still nothing.
------------edit:
Solution for problem was missing <div id="app"> </div>
Solution for problem was missing
<div id="app"> </div>
and
<script src="{{ mix('js/app.js') }}"></script>
in blade file.
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.