I made brand new app in vue and I want to add vuetify in the app as a framework. By running npm install vuetify --save this command it will add in the app but When I want to use it then there is no showing css button color while running the app.
The App.vue and the main.js files are :-
App.vue:-
<template>
<div id="app">
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
<v-btn color="warning">Warning</v-btn>
<v-btn color="info">Info</v-btn>
</div>
</template>
<script>
export default {
}
</script>
Main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
new Vue({
el: '#app',
render: h => h(App)
})
How can I run my app with CSS button coloring?
If you are using vue-cli 3 you can just run this command; vue add vuetify
If you want to add it manually look at the documentation here:
Here you have an example, remember to add css-loader in webpack.
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
new Vue({
el: '#app',
render: h => h(App)
})
EDIT:
You should not change the question like that, think about that next time it will just confuse other people looking for help or trying to help you :)
About your new question, your template is wrong. You are missing <v-app>
<v-app>
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
<v-btn color="warning">Warning</v-btn>
<v-btn color="info">Info</v-btn>
<v-app>
Check out the red banner in the documentation here:
With Vue CLI 3, you can simply add it as you add any other package: vue add vuetify.
Now if you run git diff, you will see that everything is done for you behind the scenes:
You can see the modified files by the end of the installation process:
In the past, we were used to do that manually, and it was not always evident. This is a major improvement in Vue CLI 3.
Related
I've been making a chrome extension with Vue 3 + VueRouter.
With the router.push functionality I was trying to change router-view content to a different component, meaning showing a different UI to users.
However, no matter what methods I use, I just can't change the view.
So my App.vue has router-view and I have two components that I would like to show one at a time.
Component One is About and Component Two is Home.
What I did was that I created a method that fires off on onClick event.
So, the first view is Home (users see this view first). Then when a user clicks a button, it will swap the UI component, showing About Page. I used router.push('/about') to swap the UI component to About.vue. It was unsuccessful.
I am aware of the fact that the chrome extensions are not really a web page so the routing is different but nothing seems to work.
I've checked this reference and tried it and sadly it was futile
How to display router view with VUEJS3 in a build project for google chrome extension
router.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: "/index.html",
component: () => import("../src/App.vue"),
name: "App",
},
{
path: "/about",
component: () => import("../src/views/About.vue"),
name: "About",
},
];
const router = createRouter({
history: createWebHashHistory("index.html"),
routes,
});
export default router;
main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import store from "./store/index";
import router from "./router";
const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");
App.vue (when I was using router-view)
<template>
<router-view />
</template>
If I do router-view like that on Chrome extension, nothing is showing
So I did this also to change the view by using router-link. It didn't work as well. By clicking router-link tag, nothing was working.
<template>
<Login />
<router-link to="/about"> About </router-link>
</template>
methods: {
routerPush() {
this.$router.push("about");
this.$router.push("/about"); tried both / and without /
},
}
<template>
<Login />
<span #click="routerPush"> About </span>
</template>
Did the above code to just to try out the router.push functionality. It was unsuccessful
I fixed it. The reason Vue router wasn't working is because I didn't have a renderer Vue to mount
You will need to have a component Renderer.vue or whatever that would contain in template and mount that component in main.js createApp(Renderer) like this
I am using vuetify version 2.3.10. I have a file with layout somewhat like this
<template>
<v-app>
<div>
<Users />
</div>
</v-app>
</template>
<script>
import Users from 'views/users.vue';
export default {
components: {
Users
},
</script>
But "Hello" doesn't show on the browser. But if I remove the tag something like this.
<template>
<div>
<Users />
</div>
</template>
Then in the browser I am getting this error. Cannot read property 'mobileBreakpoint' of undefined. Please help me resolve this issue.
users.vue(component)
<template>
<div>
<p>Hello</p>
</div>
</template>
index.js
The issue was here. I forgot to add vuetify : new Vuetify(), and the issue is resolved.
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
new Vue({
vuetify : new Vuetify(),
...
});
In your Users component there should be an export default statement as well (without it you can't import it later) and give it the name: 'Users' for good measure as well. Then it should work as intended. Better also store your components in components. views are meant for everything that has an own route.
Users.vue
<template>
<div><p>Hello</p></div>
</template>
<script>
export default {
name: 'Users',
}
</script>
Other.vue
<template>
<v-app>
<div>
<Users />
</div>
</v-app>
</template>
<script>
import Users from '#/components/users.vue';
export default {
components: {
Users
},
</script>
I am in a process of migration of vuetify version 1.5 to 2.3 like you
in my case,
contains minus z-index
check your style sheet
I recently used npm to install BootstrapVue with:
npm install vue bootstrap-vue bootstrap
I then included BootstrapVue into the root of my project like so:
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Finally, this is the template I am using to test the BootstrapVue component:
<template>
<div>
<search-bar />
<div v-for="post in posts" :key="post.id">
<post :postData="post" />
</div>
<b-button pill >TEST</b-button>
</div>
</template>
When I go to check the web page, the button appears, but it renders with no styling. The strange thing is that when I check the Vue dev tools extension, the BButton component is recognized and contains all the styling properties included (in this case, just the "pill" option set to true). I even inspect the button element on the DOM and it contains the classes that were passed down from BootstrapVue, but none of those styles were rendered. What am I missing here?
Also, just for good measure, I looked in the package.json file to make sure Bootstrap and BootstrapVue were installed and were up to date. They are.
in your root of your project(app.js), you will need to add 2 more lines
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
To import the css files
right now, I'm writing a single-page-application in vue.js using vue-router. Pages like the homepage, sign-in page etc. all share a navigation and footer component. On a few pages however, I need the entire screen so that the navigation and footer shall not be displayed.
Hence, I decided to nest components and include the navigation and footer component when necessary. My problems now is, that the navigation and footer template disappeared on all pages.
Edit: A more complete demo can be found in this Github repository.
Here's a simplified version of the files I'm using:
index.html:
<div id="app">
<router-view></routerview>
</div>
router.js:
import Homepage from './homepage.vue';
import SignIn from './signin.vue';
const router = new VueRouter({
routes: [
{path: '/', component: Homepage},
{path: '/signin', component: SignIn},
]
})
homepage.vue and signin.vue components:
<template>
<navigation></navigation>
// some page-specific content
<footer-vue></footer-vue>
</template>
<script>
import Navigation from './navigation.vue';
import Footer from './footer.vue';
export default {
components: {
'navigation': Navigation,
'footer-vue': Footer,
},
}
</script>
A component without navigation and footer:
<template>
// some page-specific content
</template>
Is it even possible to nest components this way? I hope someone is able to point me into the right direction.
Both homepage.vue and signin.vue have invalid templates. e.g.
<template>
<navigation></navigation>
<h1>The homepage</h1>
<footer-vue></footer-vue>
</template>
This is not allowed as it has 3 root nodes. See https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element
You need to wrap it to get it to work:
<template>
<div>
<navigation></navigation>
<h1>The homepage</h1>
<footer-vue></footer-vue>
</div>
</template>
Note that this limitation does not apply to functional components and is also expected to be lifted for all components in Vue 3.
Much more worrying is that you're not seeing any errors messages for this. You really need to look into that as it suggests there's something very much amiss with your development setup.
An example of the error message you should be seeing:
new Vue({
el: '#app',
template: '<div></div><div></div>'
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
</div>
I am using vuejs with vuetify, I put a Basic vuetify template and tried to Change the Color theme but the Color will not Switch. I do not get any Errors in my console and my Cache is cleared aswell.
The main.js Code:
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base, // #E53935
secondary: colors.indigo.base, // #FFCDD2
accent: colors.indigo.base // #3F51B5
}
});
const app = new Vue({
el: '#app',
// ...
});
And this is how my template Looks like.
<div id="app">
<v-app light>
<v-navigation-drawer
fixed
v-model="drawerRight"
right
clipped
app
>
</v-navigation-drawer>
<v-toolbar
dark
fixed
app
clipped-right
>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-spacer></v-spacer>
<v-toolbar-side-icon #click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
in my case i had to wrap all my components in v-app
<div id="id">
<v-app>
// youre code here
</v-app>
</div>
if you dont do this youre app use default theme.
reference from vuetify docs:
"In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be used within your application ONCE."
the Color will not Switch
The colour of what? You don't have any components that use theme colours there. If you want to change the background colour of the toolbar for example you have to do <v-toolbar color="primary">
#DigitalDrifter suggested #import '~vuetify/src/stylus/main'.
However, that's stylus code.
So you can create for example stylus folder and put main.styl in that folder, which is suggested so you can alter the default style easily.
Add that code to main.styl:
// main.styl
#import '~vuetify/src/stylus/main'
Then include main.styl in your app.js
// app.js
import './stylus/main.styl'
If you later want to override Vuetify default stylus variables inside (do it in main.styl), then your variables must be declared before the #import and then they will automatically override the Vuetify default variables.