Vuetify Template

Posted on  by admin

Build beautiful user experiences with customizable and expansive layout options. The following sections assume you have created a new Vuetify application using Vue CLI and have a basic understanding of Vue, HTML, CSS, and JavaScript.

Find more information on installing Vuetify with Vue CLI on our Installation page. Vuetify comes with a built-in layout system that just works out of the box. Components such as v-app-bar and v-footer support a special property named app.

This property tells Vuetify that the corresponding component is part of your application’s layout.

  • In this section you will learn the basics of how the layout system works, how to combine multiple layout components, and how to change them all dynamically.
  • There are 2 primary layout components in Vuetify, v-app and v-main.
  • The v-app component is the root of your application and a direct replacement for the default Vue entrypoint,
    .
  • The v-main component is a semantic replacement for the main HTML element and the root of your application’s content.
  • When Vue mounts to the DOM, any Vuetify component that is part of the layout registers its current height and/or width with the framework core.
  • The v-main component then takes these values and adjusts its container size.
  • To better illustrate this, let’s create a basic Vuetify layout:.
  • With no layout components in the template, v-main doesn’t need to adjust its size and instead takes up the entire page.
  • Let’s change that by adding a v-app-bar above the v-main element:.

How to Create aWeb Application with Flatlogic Platform

Because we gave v-app-bar the app prop, Vuetify knows that it is part of the layout. v-main then takes the registered height of our bar and removes the same amount from its available content area—in this case 64px of space is removed from the top of v-main's container. Vuetify has multiple pre-made layouts called wireframes that are used to scaffold an application’s UI regions.

As a final touch, let’s add a gutter by wrapping the content in a v-container component:.

Up next, we take our newly established baseline and enhance it with new layout components and customization options.

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Your search for the most promising and impactful Vuetify templates is now over. We deliver you a collection of tools that you can utilize to establish any project or web application you are working on.