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.
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
I'm trying to import vuetify on my vue app but my UI components are not looking correctly as shown here:
I read that this is caused when you are not using the v-app tag on the app.vue component. However, when I try this, all the elements of the app disappear on the browser. I also get 3-5 console errors about not being able to recognize vuetify functions or calling functions from undefined variables.
app.vue:
<template>
<v-app>
<router-view>
</router-view>
</v-app>
</template>
main.js:
//imports
import vue from 'vue';
import vuetify from 'vuetify';
//bindings
vue.use(vuetify);
//export
new vue({
vuetify,
render: a => a(app),
}).$mount('#app');
index.html:
<html>
<body>
<div id="app"></div>
</body>
</html>
Any help is greatly appreciated.
You might be missing the css file.
In your main.js add import 'vuetify/dist/vuetify.min.css'
More info: Getting started for Vuetify 2.0
I think if you are just starting, using vue add vuetify would be easier if you do have #vue/cli 3.0 or above.
i'm integrating Vue into a website, however when I use a component it's styles are added just before the closing </body> tag, which is not ideal, as I need to add styles below these to over-ride colors etc, this is per client of course.
Is there a way I can add an id to my client styles, and have my component styles appended above here?
So at my document needs to look like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Vue Styles -->
<style type="text/css">
</style>
<!-- END Vue Styles -->
<!-- Client Styles -->
<style type="text/css">
</style>
<!-- END Client Styles -->
</head>
<body>
</body>
</html>
I don't think you can order the way styles are included. But there are a couple of things you can do.
If you add styles via import in App.js they will be added first.
You can use !important to your css definitions. Ofc this will only work if the initial definitions don't already have !important set.
I have yet to try it out, but it seems that CSS Extraction provided by the vue-loader Webpack loader allows extracting the css to an external bundle. Once you have that, you can include it wherever you want on your webpage.
I don't know your application structure but in Vue you can add style for each component in that corresponding component.
TestComponent.vue
<template src='./Test.html'>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
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>
I am just curious, I installed jquery via npm locally, and created HTML code below
<body>
<script>
import jquery from "jquery";
</script>
</body>
but it got error.
my browser is chrome v65 https://caniuse.com/#feat=es6-module The import is supported and doesn't need compiler
You have to add the type="module" attribute on the <script> tag or else it won't know that you're trying to include ES6 modules. You do this by:
<script type="module">
</script>
Then the jQuery module from npm doesn't export anything by default, so you have to import the whole file like so:
<script type="module">
import './node_modules/jquery/dist/jquery.min.js'
</script>
So I'm importing everything from the jQuery file. Then what we get is the variable jQuery and the variable $ assigned to the global window var.
Try import * as $ from 'jquery'