kandi background
Explore Kits

vuetify | Material Component Framework for Vue | User Interface library

 by   vuetifyjs TypeScript Version: v3.0.0-beta.1 License: MIT

 by   vuetifyjs TypeScript Version: v3.0.0-beta.1 License: MIT

Download this library from

kandi X-RAY | vuetify Summary

vuetify is a TypeScript library typically used in User Interface, Vue applications. vuetify has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
Vuetify is a Vue UI Library with beautifully handcrafted Components using the Material Design specification. No design skills required — everything you need to create amazing applications is at your fingertips. Supercharge your development process with all of the tools that you need to succeed:. Vuetify supports all modern browsers, including IE11 and Safari 9+ (using polyfills). Components are designed for a minimum width of 320px.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • vuetify has a medium active ecosystem.
  • It has 34010 star(s) with 6180 fork(s). There are 604 watchers for this library.
  • There were 1 major release(s) in the last 6 months.
  • There are 988 open issues and 9692 have been closed. On average issues are closed in 251 days. There are 52 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of vuetify is v3.0.0-beta.1
vuetify Support
Best in #User Interface
Average in #User Interface
vuetify Support
Best in #User Interface
Average in #User Interface

quality kandi Quality

  • vuetify has 0 bugs and 0 code smells.
vuetify Quality
Best in #User Interface
Average in #User Interface
vuetify Quality
Best in #User Interface
Average in #User Interface

securitySecurity

  • vuetify has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • vuetify code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
vuetify Security
Best in #User Interface
Average in #User Interface
vuetify Security
Best in #User Interface
Average in #User Interface

license License

  • vuetify is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
vuetify License
Best in #User Interface
Average in #User Interface
vuetify License
Best in #User Interface
Average in #User Interface

buildReuse

  • vuetify releases are available to install and integrate.
  • It has 2997 lines of code, 0 functions and 1751 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
vuetify Reuse
Best in #User Interface
Average in #User Interface
vuetify Reuse
Best in #User Interface
Average in #User Interface
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

vuetify Key Features

WCAG Accessibility (a11y) / WCAG / Section 508 / RTL support

30+ supported languages

Smaller bundle sizes with automatic tree-shaking

A massive Discord community

18 months Long-term support for Major releases

IE11 / Safari 9 support with polyfill

Extensive customization options with SASS/SCSS and Presets

Responsive support down to 320px width

Direct support support from Vuetify

Maintain grid system across `default.vue` and `index.vue` in vuetify

copy iconCopydownload iconDownload
<template>
    <div class="row">
        <div class="col-2">
            <div class="row">
                <div class="col"> Navigation </div>
            </div>
        </div>
        <div class="col-8">
            <!-- I need this div in index.vue -->
            <Nuxt />
            <div class="row">
                <div class="col">Card 1</div>
                <div class="col">Card 2</div>
                <div class="col">Card 3</div>
            </div>
        </div>
        <div class="col-2">
            <CompanyCard></CompanyCard>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
    </div>
</template>
-----------------------
<template>
    <div class="row">
        <div class="col-2">
            <div class="row">
                <div class="col"> Navigation </div>
            </div>
        </div>
        <div class="col-8">
            <!-- I need this div in index.vue -->
            <Nuxt />
            <div class="row">
                <div class="col">Card 1</div>
                <div class="col">Card 2</div>
                <div class="col">Card 3</div>
            </div>
        </div>
        <div class="col-2">
            <CompanyCard></CompanyCard>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
    </div>
</template>

Vue 3 and Vuetify 3 Alpha: ValidationError: progress plugin invalid options

copy iconCopydownload iconDownload
node -v && vue -V && npm -v

Vuetify grid of cards aligned with a divider

copy iconCopydownload iconDownload
<v-row :justify="$vuetify.breakpoint.lgAndUp ? 'space-between' : 'start'">
-----------------------
<v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'space-between'" :class="getClassByScreenSize()">
  ...
</v-row>
.two-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.five-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
...
methods: {
  getClassByScreenSize() {
    if (this.$vuetify.breakpoint.xlOnly) {
      return 'five-cols'
    }
    if (this.$vuetify.breakpoint.lgOnly) {
      return 'three-cols'
    }
    if (this.$vuetify.mdOnly) {
      return 'two-cols'
    }
    return ''
  }
}
-----------------------
<v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'space-between'" :class="getClassByScreenSize()">
  ...
</v-row>
.two-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.five-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
...
methods: {
  getClassByScreenSize() {
    if (this.$vuetify.breakpoint.xlOnly) {
      return 'five-cols'
    }
    if (this.$vuetify.breakpoint.lgOnly) {
      return 'three-cols'
    }
    if (this.$vuetify.mdOnly) {
      return 'two-cols'
    }
    return ''
  }
}
-----------------------
<v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'space-between'" :class="getClassByScreenSize()">
  ...
</v-row>
.two-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.five-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
...
methods: {
  getClassByScreenSize() {
    if (this.$vuetify.breakpoint.xlOnly) {
      return 'five-cols'
    }
    if (this.$vuetify.breakpoint.lgOnly) {
      return 'three-cols'
    }
    if (this.$vuetify.mdOnly) {
      return 'two-cols'
    }
    return ''
  }
}

Overriding Vuetify variables when building a Vue2+Vuetify app with Vite

copy iconCopydownload iconDownload
// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ⋮
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
})
// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // ❌ no semicolons for indented syntax
        // additionalData: `@import "./src/styles/variables"; @import "vuetify/src/styles/settings/_variables";`

        // ✅
        additionalData: [
          '@import "./src/styles/variables"',
          '@import "vuetify/src/styles/settings/_variables"',
          '', // end with newline
        ].join('\n'),
      },
    },
  },
})
// plugins/vuetify.js
import Vue from 'vue'

// ❌ defeats dynamic imports from unplugin-vue-components
// import Vuetify from 'vuetify'
// import 'vuetify/dist/vuetify.min.css'

// ✅
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({/* options */})
-----------------------
// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ⋮
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
})
// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // ❌ no semicolons for indented syntax
        // additionalData: `@import "./src/styles/variables"; @import "vuetify/src/styles/settings/_variables";`

        // ✅
        additionalData: [
          '@import "./src/styles/variables"',
          '@import "vuetify/src/styles/settings/_variables"',
          '', // end with newline
        ].join('\n'),
      },
    },
  },
})
// plugins/vuetify.js
import Vue from 'vue'

// ❌ defeats dynamic imports from unplugin-vue-components
// import Vuetify from 'vuetify'
// import 'vuetify/dist/vuetify.min.css'

// ✅
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({/* options */})
-----------------------
// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ⋮
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
})
// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // ❌ no semicolons for indented syntax
        // additionalData: `@import "./src/styles/variables"; @import "vuetify/src/styles/settings/_variables";`

        // ✅
        additionalData: [
          '@import "./src/styles/variables"',
          '@import "vuetify/src/styles/settings/_variables"',
          '', // end with newline
        ].join('\n'),
      },
    },
  },
})
// plugins/vuetify.js
import Vue from 'vue'

// ❌ defeats dynamic imports from unplugin-vue-components
// import Vuetify from 'vuetify'
// import 'vuetify/dist/vuetify.min.css'

// ✅
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({/* options */})

How to import multiple locale json files in Vue 3 + i18n?

copy iconCopydownload iconDownload
{
  "ru": {
    "header": {
      "hello": "Привет"
    },
    "footer": {
      "bye": "Пока"
    }
  },
  "en": {
    "header": {
      "hello": "Hello"
    },
    "footer": {
      "bye": "Goodbye"
    }
  }
}
// import foo_msg from './components/json/foo/foo_messages.json'
const foo_msg = {
  "ru": {
    "header": {
      "hello": "Привет"
    }
  },
  "en": {
    "header": {
      "hello": "Hello"
    }
  }
}

// import bar_msg from './components/json/bar/bar_messages.json'
const bar_msg = {
  "ru": {
    "footer": {
      "bye": "Пока"
    }
  },
  "en": {
    "footer": {
      "bye": "Goodbye"
    }
  }
}

const sources = [foo_msg, bar_msg]
const messages = sources.reduce((acc, source) => {
  for(key in source) {
    acc[key] = { ...(acc[key] || {}), ...source[key] }
  }
  return acc
},{})

console.log(messages)
-----------------------
{
  "ru": {
    "header": {
      "hello": "Привет"
    },
    "footer": {
      "bye": "Пока"
    }
  },
  "en": {
    "header": {
      "hello": "Hello"
    },
    "footer": {
      "bye": "Goodbye"
    }
  }
}
// import foo_msg from './components/json/foo/foo_messages.json'
const foo_msg = {
  "ru": {
    "header": {
      "hello": "Привет"
    }
  },
  "en": {
    "header": {
      "hello": "Hello"
    }
  }
}

// import bar_msg from './components/json/bar/bar_messages.json'
const bar_msg = {
  "ru": {
    "footer": {
      "bye": "Пока"
    }
  },
  "en": {
    "footer": {
      "bye": "Goodbye"
    }
  }
}

const sources = [foo_msg, bar_msg]
const messages = sources.reduce((acc, source) => {
  for(key in source) {
    acc[key] = { ...(acc[key] || {}), ...source[key] }
  }
  return acc
},{})

console.log(messages)

Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8

copy iconCopydownload iconDownload
npm install laravel-mix@latest @tailwindcss/forms@latest
"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
-----------------------
npm install laravel-mix@latest @tailwindcss/forms@latest
"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

How to check v-data-table element on Cypress

copy iconCopydownload iconDownload
cy.visit('https://vuetifyjs.com/en/components/data-tables/#row-selection')
cy.get('td .v-input--selection-controls__input').each(($ele) => {
  cy.wrap($ele).click()
})
cy.contains('td','Frozen Yogurt').parent('tr').children().first().click()
-----------------------
cy.visit('https://vuetifyjs.com/en/components/data-tables/#row-selection')
cy.get('td .v-input--selection-controls__input').each(($ele) => {
  cy.wrap($ele).click()
})
cy.contains('td','Frozen Yogurt').parent('tr').children().first().click()
-----------------------
<table id="dataTable">                       // table
  <tr>                                       // row 
    <td><span class="v-icon"></span></td>    // column e.g checkbox
    <td>Some text description</td>           // column e.g description
    <td>300</td>                             // column e.g score
  </tr>
</table
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("Some text description")  // pick the one with this text
  .scrollIntoView()                   // in case the row is not in view
  .prev()                             // get column previous to description
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":first")                 // get first column (checkbox)
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":has(.v-icon)")          // get column with the checkbox
  .click()
cy.get("#dataTable tbody tr")           // selects all rows in #dataTable
  .find('.v-icon')                      // select all the checkboxes
  .click({force: true, multiple: true}) // all rows
-----------------------
<table id="dataTable">                       // table
  <tr>                                       // row 
    <td><span class="v-icon"></span></td>    // column e.g checkbox
    <td>Some text description</td>           // column e.g description
    <td>300</td>                             // column e.g score
  </tr>
</table
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("Some text description")  // pick the one with this text
  .scrollIntoView()                   // in case the row is not in view
  .prev()                             // get column previous to description
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":first")                 // get first column (checkbox)
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":has(.v-icon)")          // get column with the checkbox
  .click()
cy.get("#dataTable tbody tr")           // selects all rows in #dataTable
  .find('.v-icon')                      // select all the checkboxes
  .click({force: true, multiple: true}) // all rows
-----------------------
<table id="dataTable">                       // table
  <tr>                                       // row 
    <td><span class="v-icon"></span></td>    // column e.g checkbox
    <td>Some text description</td>           // column e.g description
    <td>300</td>                             // column e.g score
  </tr>
</table
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("Some text description")  // pick the one with this text
  .scrollIntoView()                   // in case the row is not in view
  .prev()                             // get column previous to description
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":first")                 // get first column (checkbox)
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":has(.v-icon)")          // get column with the checkbox
  .click()
cy.get("#dataTable tbody tr")           // selects all rows in #dataTable
  .find('.v-icon')                      // select all the checkboxes
  .click({force: true, multiple: true}) // all rows
-----------------------
<table id="dataTable">                       // table
  <tr>                                       // row 
    <td><span class="v-icon"></span></td>    // column e.g checkbox
    <td>Some text description</td>           // column e.g description
    <td>300</td>                             // column e.g score
  </tr>
</table
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("Some text description")  // pick the one with this text
  .scrollIntoView()                   // in case the row is not in view
  .prev()                             // get column previous to description
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":first")                 // get first column (checkbox)
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":has(.v-icon)")          // get column with the checkbox
  .click()
cy.get("#dataTable tbody tr")           // selects all rows in #dataTable
  .find('.v-icon')                      // select all the checkboxes
  .click({force: true, multiple: true}) // all rows
-----------------------
<table id="dataTable">                       // table
  <tr>                                       // row 
    <td><span class="v-icon"></span></td>    // column e.g checkbox
    <td>Some text description</td>           // column e.g description
    <td>300</td>                             // column e.g score
  </tr>
</table
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("Some text description")  // pick the one with this text
  .scrollIntoView()                   // in case the row is not in view
  .prev()                             // get column previous to description
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":first")                 // get first column (checkbox)
  .click()
cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":has(.v-icon)")          // get column with the checkbox
  .click()
cy.get("#dataTable tbody tr")           // selects all rows in #dataTable
  .find('.v-icon')                      // select all the checkboxes
  .click({force: true, multiple: true}) // all rows

How can I wrap a vue component during cypress component testing?

copy iconCopydownload iconDownload
import {mount} from "@cypress/vue";
import vuetify from '../../resources/js/vuetify'
import { VApp } from 'vuetify/lib/components'

function mountComponentWithVuetify(componentToMount, options = {}) 
{
  return mount({
    render(h) {
      return h(VApp, [h(componentToMount)])
    }
  },
  { 
    vuetify, 
    ...options,
  })
}

-----------------------
<template>
  <v-btn color="red lighten-2" dark>
    Click Me
  </v-btn>
</template>
import Button from "./Button";
import {mount} from "@cypress/vue";
import vuetify from '../plugins/vuetify'
import { VApp } from 'vuetify/lib/components'

const WrapperComp = {
  template: `
    <v-app>
      <Button />
    </v-app>
  `,
  components: {
    VApp,
    Button
  }
}

it('mounts the component with vuetify', () => {

  mount(WrapperComp, { vuetify })

  const lightRed = 'rgb(229, 115, 115)'
  cy.contains('button', 'Click Me')        // ✅
    .should('have.css', 'background-color', lightRed)  // fails if no <v-app> used above
})
-----------------------
<template>
  <v-btn color="red lighten-2" dark>
    Click Me
  </v-btn>
</template>
import Button from "./Button";
import {mount} from "@cypress/vue";
import vuetify from '../plugins/vuetify'
import { VApp } from 'vuetify/lib/components'

const WrapperComp = {
  template: `
    <v-app>
      <Button />
    </v-app>
  `,
  components: {
    VApp,
    Button
  }
}

it('mounts the component with vuetify', () => {

  mount(WrapperComp, { vuetify })

  const lightRed = 'rgb(229, 115, 115)'
  cy.contains('button', 'Click Me')        // ✅
    .should('have.css', 'background-color', lightRed)  // fails if no <v-app> used above
})

My border-bottom is not displayed in Vuetify

copy iconCopydownload iconDownload
border-bottom: 8px solid white;

How to use vue-tel-input-vuetify in Nuxt?

copy iconCopydownload iconDownload
import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';

Vue.use(VueTelInputVuetify, {
  vuetify,
});
plugins: ['@/plugins/phone-input'],
<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
}
</script>
build: {
  transpile: [
    'vue-tel-input-vuetify',
    // 'vuetify' // this one may also be needed, try with and without
  ],
}
-----------------------
import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';

Vue.use(VueTelInputVuetify, {
  vuetify,
});
plugins: ['@/plugins/phone-input'],
<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
}
</script>
build: {
  transpile: [
    'vue-tel-input-vuetify',
    // 'vuetify' // this one may also be needed, try with and without
  ],
}
-----------------------
import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';

Vue.use(VueTelInputVuetify, {
  vuetify,
});
plugins: ['@/plugins/phone-input'],
<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
}
</script>
build: {
  transpile: [
    'vue-tel-input-vuetify',
    // 'vuetify' // this one may also be needed, try with and without
  ],
}
-----------------------
import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';

Vue.use(VueTelInputVuetify, {
  vuetify,
});
plugins: ['@/plugins/phone-input'],
<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
}
</script>
build: {
  transpile: [
    'vue-tel-input-vuetify',
    // 'vuetify' // this one may also be needed, try with and without
  ],
}

Community Discussions

Trending Discussions on vuetify
  • Maintain grid system across `default.vue` and `index.vue` in vuetify
  • Vue 3 and Vuetify 3 Alpha: ValidationError: progress plugin invalid options
  • Vuetify grid of cards aligned with a divider
  • Overriding Vuetify variables when building a Vue2+Vuetify app with Vite
  • How to import multiple locale json files in Vue 3 + i18n?
  • How to unfocus button after click in Vuetify 3
  • Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8
  • How to change font-family when locale language changes in vuetify
  • Apollo pagination with vuex
  • How to check v-data-table element on Cypress
Trending Discussions on vuetify

QUESTION

Maintain grid system across `default.vue` and `index.vue` in vuetify

Asked 2022-Feb-21 at 10:47

I am very new to vue, this probably is very basic question. I want a page with 3-col layout, where two columns should be in default.vue and the one column should be in a page, say index.vue. I have created everything in default.vue and it works fine but I can not maintain that when I move the content to index.vue file. Here is overview of what I have:

<html>
 <body>  
  <div class="row">
    <div class="col-2">
      <div class="row">
        <div class="col">
          Navigation
        </div>
      </div>
    </div>
    <div class="col-8"> <!-- I need this div in index.vue -->
      <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
      </div>
      <div class="row">
        <div class="col">Card 1</div>
        <div class="col">Card 2</div>
        <div class="col">Card 3</div>
      </div>
    </div>
    <div class="col-2">
      <CompanyCard></CompanyCard>
    </div>
  </div>
</body>
</html>

Here, if I move the whole div including col-8 to index.vue then CompanyCard moves to left near the Navigation and the main div goes below that. On the other had, if I just keep the line <div class="col-8"> in default.vue and move the content (2 rows inside this) to index.vue. The CompanyCard remains at right, as it should but the middle column is blank and the content is below that. How do I maintain that 3-col format across default.vue and index.vue ?

I am using Nuxt with Vuetify.

Thank you!

ANSWER

Answered 2022-Feb-21 at 10:47

If you're using Nuxt then you should use <Nuxt /> component inside defualt.vue. this will include the page component you can check nuxt layout docs

example for default.vue:

<template>
    <div class="row">
        <div class="col-2">
            <div class="row">
                <div class="col"> Navigation </div>
            </div>
        </div>
        <div class="col-8">
            <!-- I need this div in index.vue -->
            <Nuxt />
            <div class="row">
                <div class="col">Card 1</div>
                <div class="col">Card 2</div>
                <div class="col">Card 3</div>
            </div>
        </div>
        <div class="col-2">
            <CompanyCard></CompanyCard>
        </div>
    </div>
</template>

now inide your index.vue add:

<template>
    <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
    </div>
</template>

Source https://stackoverflow.com/questions/71195369

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install vuetify

You can download it from GitHub.

Support

Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from the entire Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! 🎉.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Compare User Interface Libraries with Highest Quality
Compare User Interface Libraries with Highest Security
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.