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.
Related
Just starting with vue.js. I am using Visual Studio Code, and have followed all the instructions for using VS Code with the Volar extension. I can see from the source files that the sample project includes a 'hello world' page (HelloWorld.vue). But when I run index.html I just get a blank screen , because of a CORS error (see below).
I haven't changed any code from the installed sample, so it appears that the vuejs.org instructions are not complete.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
and main.js:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
So what do I need to do to make use of the example .vue components?
The Chrome console shows a CORS problem:
Access to script at 'file:///C:/Users/quilk/Documents/testvue/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
To have an easy and simple time working with Vue, I recommend following the official steps:
npm init vue#latest
cd <your-project-name>
npm install
npm run dev
For CORS, you need to fix it on your backend/service dashboard. More details are available here.
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
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>
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>