10.1k
New Components: Field, Input Group, Item and more

Page Examples

Full page layouts and templates for common e-commerce pages. Copy and paste into your apps. Works with all Vue frameworks.

Browse Pages Documentation
Files
pages/layout-boxed/index.vue 
<script lang="ts">
export const description = "Centered boxed layout with constrained content width."
</script>

<script setup lang="ts">
import LayoutBoxed from "@/components/LayoutBoxed.vue"
</script>

<template>
  <LayoutBoxed />
</template>
Centered boxed layout with constrained content width.
layout-boxed
Files
pages/layout-fullwidth/index.vue 
<script lang="ts">
export const description = "Full-width page layout with header, content area, and footer."
</script>

<script setup lang="ts">
import LayoutFullwidth from "@/components/LayoutFullwidth.vue"
</script>

<template>
  <LayoutFullwidth />
</template>
Full-width page layout with header, content area, and footer.
layout-fullwidth
Files
pages/layout-sidebar/index.vue 
<script lang="ts">
export const description = "Sidebar layout with persistent side navigation and content area."
</script>

<script setup lang="ts">
import LayoutSidebar from "@/components/LayoutSidebar.vue"
</script>

<template>
  <LayoutSidebar />
</template>
Sidebar layout with persistent side navigation and content area.
layout-sidebar