I'm trying to use turn my vue app into a widget to use on external sites so basically I'm using https://github.com/karol-f/vue-custom-element
this to turn the app component into custom tag problem is my app have router and when I'm trying to use it on external website the parent URL some how get injected into my vue widget and this give me 404 not found page in my vue app how to solve this?
main.js file
import vueCustomElement from "vue-custom-element";
Vue.use(vueCustomElement);
App.store = store;
App.router = router;
Vue.customElement("vue-widget", App);
index.html
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<vue-widget></vue-widget>
<!-- <div id="app"></div> -->
<!-- built files will be auto injected -->
</body>
Related
I know one can develop vue.js application without build process, for example by including
<script src="https://unpkg.com/vue#3"></script>.
But what about plugins? Let's say I want to use vue-good-table, should I find a link for every minified javascript file for every plugin, and their dependencies too?
Is there an easy way to do it?
The reasons are explained here, I need to add functionality to existent web applications.
vue-good-table-next (for Vue 3) has a "global" build that works via CDN, but it expects window.vue to already be defined, so you'd have to import vue first (which defines window.Vue), and assign a global vue to Vue:
<script src="https://unpkg.com/vue#3.2.33/dist/vue.global.js"></script>
<script>
// workaround: VueGoodTable expects 'vue' to be defined
window.vue = window.Vue;
</script>
<script src="https://unpkg.com/vue-good-table-next#0.1.0/dist/vue-good-table-next.global.prod.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-good-table-next#0.1.0/dist/vue-good-table-next.css"
/>
Then, VueGoodTable.default is defined as the vue-good-table plugin, which can be installed on the app instance via app.use():
<div id="app">
<vue-good-table ⋯></vue-good-table>
</div>
<script>
const app = Vue.createApp({⋯})
app.use(VueGoodTable.default)
app.mount('#app')
</script>
demo
Internet is full of examples of applications served with Flask (api) and Vue.js (client), but since Vue is a SPA it make sense to serve it with flask as well.
I didn't find any help, especially where the App is stored in an external js.
With Firefox I get error for a disallowed type:
Loading module from “http://localhost:5000/static/App” was blocked
because of a disallowed MIME type (“text/html”).
On Chrome I just get file not found since it tries to get the App file instead of App.vue.
Here is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
{% raw %}
<div id="app">
{{ message }}
</div>
{% endraw %}
</body>
<script type="module" src="{{ url_for('static', filename='myvue.js') }}"></script>
</html>
The myvue.js
import App from './App.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
The app.vue (simply got from another example on SO):
<template>
<div id="app">
<h1>My Todo App!</h1>
<!-- <TodoList/> -->
</div>
</template>
Note that the {{message}} is useless there and can be removed. I suspect the template is also wrong, but I can't reach that point.
I'd like to be able to work without the CLI or at least being able to do all by myself to avoid another layer of dependencies (npm scares me with the huge list of deprecated stuff)
It doesn't really make sense to serve a Vue SPA app from Flask to my mind. What are you actually trying to achieve?
If you are looking to setup a configuration where a SPA app can access data on a Flask server, then the typical configuration is to build a VueJS SPA app using the CLI and Node, then deliver the compiled build directly from your web server (e.g. Apache, IIS). There's no reason to pipe the delivery of the SPA app via Flask, all that does is add a bunch of overhead.
Use Flask to expose a REST API that your SPA app can call (e.g. using AXIOS) to retrieve/write data, etc.
I am trying to learn Vue.js and understand SFCs and importing components into other components. The main App.vue is mounted/loaded into the <div id="app"></div> within an index.html file.
However I have come across a tutorial that does this in the src/index.html file which I don't understand:
<html>
<head>
...
</head>
<body>
<div id="app">
<app></app> <!-- how is it possible to include a Vue.js component here?
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
I don't understand how a regular HTML file can contain reference to a Vue.js component like above. I can't see it being done like this anywhere in the docs.
forgive my ignorance here, I am super new to Vue. I am looking for a way to utilize bootstrap-Vue from CDN (https://bootstrap-vue.js.org/docs/ click browser on right nav). I am not seeing how to call the components. Using the webpack / CLI version, no problems, but CDN, I am lost at how to use this.
I put up a simple codepen.io to test this. I've added the CSS and js files per the docs.
https://codepen.io/jasonflaherty/pen/rrzbxj
//do I need this?
Vue.use(BootstrapVue);
//try individual components.
import { Card } from 'bootstrap-vue/es/components';
Vue.use(Card);
What am I missing to utilize bootstrap-vue.js CDN? Do I need to import differently?
Just include the required CDN below and without invoking Vue.use(XXX)
(There is a Basic example from the official website.)
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"
/>
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
When you run the Basic example, you will get the bootstrap decoration.
If you use the CDN, you do not need to use the BootstrapVue plugin; it will do that for you. Just including the script adds all the BootstrapVue components globally.
You cannot use ES6 import statements in the browser.
You do need to create a Vue.
Here is your pen updated.
You should to use a basic structure of Vue. So, your JS should be:
const vue = new Vue({
el: "#app"
})
And is necessary that your HTML code stay into a:
<div id="app">
<!-- ...your code -->
</div>
Trying to make a custom polymer element in ASP.NET 5 in Visual Studio Community. I select "New Project"->"Web"->ASP.NET Core Web Application (.NET Core). In Solution Explorer I add a new file "helloworld.html", in this file I create a new polymer element with this code:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="hello-world">
<style></style>
<template>
<h1>Hello world</h1>
</template>
</dom-module>
<script>
Polymer({
is: "hello-world"
});
</script>
Next I try to implement (add) this element to the DOM that is created by ASP.NET 5, so I make changes in those two files index.cshtml and _layout.cshtml.
The file index.cshtml is:
#{
ViewData["Title"] = "Home Page";
}
<link rel="import" href="~/helloworld.html"/>
<div class="row">
<hello-world></hello-world>
</div>
In _layout.cshtml I add two lines of code:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
Next I click debug but no Hello World on the screen. Only header and footer from _layout.cshtml
I think
<link rel="import" href="~/helloworld.html"/>
must be outside the { ... }
If not, take a look at the source HTML code and, using F12 (IE/Chrome... debugger), see Network tab for errors.
In addition to what already has been suggested. Are you sure that
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
are in the right place? Load the page, open the developer tools (F12) and in the HTML/DOM view/explorer check that these lines actually appear in the <head> tag of the loaded page. The default ASP.NET Core template contains <environment> tags in _Layout.cshtml. In my test with your code I first put the links into the wrong environment. Now it works for me.