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>
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
is anyone can help me to with this components?
I've tried to create my own component but I can only see this:
into my code:
I copied the code from the link into a component and called the component in my app.
I dropped this in the head:
<link href="https://unpkg.com/vuesax#4.0.1-alpha.16/dist/vuesax.min.css" rel="stylesheet">
and dropped this in the body:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuesax#4.0.1-alpha.16/dist/vuesax.min.js"></script>
<script src="https://unpkg.com/vuesax"></script>
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>
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'm trying to implement Veutify's text field
This is what it looks like for me right now:
And this is what it looks like when the text field is in focus:
These are my imports in main.js
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Am I missing an import or something?
I ran in the same issue, you need to wrap your application in a <v-app>.
The reason is that the border's color depends on the theme you're using. If you try to inspect the documentation you will see that the border's rule is something like .application--light .input-group .input-group__details: application--light is indeed a class added by v-app.
Same issue
But I fixed by this solution.
Please add this link(CDN) to you html file.
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
Don't worry
no crashing.