I am having an issue with Vuetify not breaking my flex boxes like expected when viewing on small screen. I expect the form to break into 3 parts each spanning 12 cols when viewing on a small screen. However what happens is it just retains it's size from the original. It does not stack verticly like expected. The template code is below;
EDIT: I can tell that vuetify is updating the the breakpoints, but the layout does not change. If I set a computed property to this.$vuetify.breakpoint.lgandup I can see that when changing the screen size the boolean changes to false when it should and back to true when it should. But the layout does not change.
EDIT: I've updated my question with some more information and tried to include all relevant files.
EDIT: I want to add that I have figured out a small work around, by adding 'wrap'.. <v-layout row wrap> however it seems that this would not be needed since I'm already telling vuetify to break that into a full 12 col span on small screens, so there shouldn't be anything to wrap. Still looking for more insight here.
main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '#mdi/font/css/materialdesignicons.css'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// Override default theme for Vuetify
Vue.use(Vuetify, {
iconfont: 'mdi',
theme: {
"primary": "#673ab7",
"secondary": "#757575",
"accent": "#d500f9",
"error": "#ff1744",
"info": "#d500f9",
"success": "#4caf50",
"warning": "#ff9100"
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
app.vue
<template>
<div id="app">
<v-app>
<nav-draw/>
<nav-bar/>
<v-content>
<v-container fluid>
<v-layout row>
<v-flex x12 sm12 md12 lg1 xl1>
Test
</v-flex>
<v-flex xs12 sm12 md12 lg9 xl9>
{{ this.$vuetify.breakpoint.mdAndDown }}
</v-flex>
<v-flex xs12 sm12 md12 lg2 xl2>
{{ this.$vuetify.breakpoint.lgAndUp }}
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app>2019 .com</v-footer>
</v-app>
</div>
</template>
<script>
import NavDraw from '#/components/NavDraw'
import NavBar from '#/components/NavBar'
export default {
components: {NavDraw, NavBar }
}
</script>
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath
%>favicon.ico">
<title>FranchiseFaves</title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Any help is appreciated!
try to remove the <div id="app"> in you app.vue. because you already call it in
public/index.html
Related
How can I center the text inside a v-chip component vertically?
Since it's a vuetify component, I looked at the documentation but there's no such property for this.
<v-chip
v-if="this.drawerNodeData.type == 'Telecom'"
:color="telecom"
text-color="white"
class="chips"
>
{{ this.drawerNodeData.type }}
</v-chip>
As you said styles for chips class are not yet implemented. In that case your code should work as per the requirement as by default chip text center aligned vertically and horizontally. Here is the demo :
new Vue({
el: '#app',
vuetify: new Vuetify()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-chip color="primary" text-color="white">Default</v-chip>
</v-container>
</v-app>
</div>
I'm trying to add a v-switch to my web app.
But it displays wrong (label should be next to v-switch, but as you can see from the picture)
Any ideas on how to fix this?
I am not sure about your source code but ideally it should work. Here is the Demo :
Vue.use(Vuetify);
new Vue({
el: '#app',
data () {
return {
switch1: false,
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-switch
v-model="switch1"
label="Test Switch Label"
></v-switch>
</v-container>
</v-app>
</div>
Please let me know what challenge you are facing as per above code snippet.
Solved it with this easy-CSS trick!
<style>
.v-input__control label {
top: 0px;
}
</style>
I've been using Vuetify for a few weeks now.
Having read the docs and some posts in that regard I tried to alter the 'dark' theme to suite my needs.
From some reason, I can only alter colours to components by specifically setting their colours of via CSS of course.
my vuetify.js file (under plugins) looks like that:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
},
dark: {
primary: colors.blueGrey.darken2,
secondary: colors.blueGrey.lighten2,
accent: colors.blueGrey.darken3,
},
},
},
});
My App.vue file looks like that:
<div>
<v-app dark>
<v-tabs background-color="#2c394f" color="white">
<v-tab to="/deploy">Deploy</v-tab>
<v-tab to="/dashboard">Dashboard</v-tab>
</v-tabs>
<keep-alive>
<router-view/>
</keep-alive>
</v-app>
</div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>
</style>
As you may notice, I'm using dark theme (in v-app component) and since my theme definitions are not being applied, I've manually set the (for instance) v-tabs component.
Ideally, I'd like to just set the colour of v-tabs using color="primary" or something like that, but if I remove the properties, I'm getting the default theme, which is 'light' in that case.
Any help will be appreciated.
You just need to set theme.dark:true to enable dark for the entire app.
Then the custom dark colors will be applied..
export default new Vuetify({
theme: {
dark: true,
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
},
dark: {
primary: colors.blueGrey.darken2,
secondary: colors.blueGrey.lighten2,
accent: colors.blueGrey.darken3,
},
},
},
})
Demo
To extend Zim answer, there's also the ability to set it programatically if you want to provide that option to the user using this.$vuetify.theme.dark //bolean.
This example may be seen in the documentation https://vuetifyjs.com/en/features/theme/#theme-provider
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['One', 'Two', 'Three']
}),
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-card flat>
<v-toolbar flat height="72">
<v-switch v-model="$vuetify.theme.dark" hint="This toggles the global state of the Vuetify theme" inset label="Vuetify Theme Dark" persistent-hint></v-switch>
</v-toolbar>
<v-card-text>
<v-list dark>
<v-subheader>I inherit dark from my parent</v-subheader>
<v-list-item v-for="item in items" :key="item">
<v-list-item-title v-text="item"></v-list-item-title>
</v-list-item>
</v-list>
<v-divider class="mb-y"></v-divider>
<v-theme-provider root>
<v-list>
<v-subheader>
<span>I inherit from the root</span>
<strong> $vuetify.theme.dark</strong>
</v-subheader>
<v-list-item
v-for="item in items"
:key="item"
>
<v-list-item-title v-text="item"></v-list-item-title>
</v-list-item>
</v-list>
</v-theme-provider>
</v-card-text>
</v-card>
</v-container>
</v-main>
<v-footer>Footer without app</v-footer>
</v-app>
</div>
I used laravel 6.2 and vuetify. But, my vuetify not working. i don't see any design for vuejs. And There is no any mistake What did i wrong??. Please help me.
"vuetify": "^2.1.12"
"laravel/framework": "^6.2"
Below code is my script:
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
Using app.scss in bootstrap:
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons');
#import '~vuetify/dist/vuetify.min.css';
following code is my web page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id ="app">
<v-toolbar>
<v-toolbar-items>
<v-btn text>Link one</v-btn>
<v-btn text>Link two</v-btn>
<v-btn text>Link three</v-btn>
</v-toolbar-items>
<script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>
First in assets/js/components folder create a new file called Navbar.vue. Then in Navbar.vue write
<template>
<v-toolbar>
<v-toolbar-items>
<v-btn text>Link one</v-btn>
<v-btn text>Link two</v-btn>
<v-btn text>Link three</v-btn>
</v-toolbar-items>
</template>
<script>
</script>
In you app.js add newly created component like so
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('navbar', require('./components/Navbar.vue').default);
const app = new Vue({
el: '#app',
});
Then in your index.blade.php file change it to the following.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id ="app">
<navbar></navbar>
</div>
<script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>
And finally run npm run dev. Visit the page and now you should be able to see everything as it should be.
As i said in this reply, in Vuetify 2 when you create your Vue istance you must create a new istance of Vuetify also.
const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});
I suggest you also to add this after importing Vuetify:
import 'vuetify/dist/vuetify.min.css'
I'm very confused with basic example of vuetify template. I have prepared codepen here: https://codepen.io/Disorrder/pen/aPpeBW
This example works as expected. I have page with toolbar and filled all space except toolbar with content. And it works nice without overflowing.
Also this code was described here in official docs: https://vuetifyjs.com/en/getting-started/quick-start#cdn-install
But! I have this absolutely same html code below. You can just create html file and run in browser, and see the broblem. Page overflows on toolbar height, so it seems v-container stratches on 100vh instead of 100% of parent's height. I can't understand this and give up. :(
Screenshot: https://yadi.sk/i/cGIfK2iH_Clxyg
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<title>Test</title>
<script>
window.onload = () => {
new Vue({
el: '#app',
});
};
</script>
</head>
<body>
<div id="app">
<v-app>
<v-toolbar app dense>
<v-toolbar-title>Toolbar</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout style="background: #bed;"></v-layout>
</v-container>
</v-content>
</v-app>
</div>
</body>
</html>
oh... I think, I found solution. If you add <!DOCTYPE html> at the beginning of the code, it works as a brilliant. But what a hell? Can anybody explain this magic?