FreeTemplate · Landing pages
App Landing
Vue 3 landing page for a mobile app with a CSS-drawn phone mockup, feature highlights, a screenshot strip and download buttons. Tailwind CSS, dark mode.
by Vueplay
Vue templateFree
Arctic
Arctic is a sleek and minimal Vue Play template inspired by the calm and clarity of icy landscapes. With clean layouts, cool tones, and a modern design system, it’s perfect for projects that need a fresh, elegant, and professional look. Whether you’re building portfolios, dashboards, or landing pages, Arctic provides a crisp foundation that puts your content in focus.
by Steffan Halvorsenvfd6e8bcedf2eUpdated last year
Code
95 files in the repo<template>
<router-view :class="{ dark: theme === 'dark' }" />
</template>
<script>
import {
inject,
watch,
onMounted
} from 'vue';
import {
useTheme
} from 'vuetify';
export default {
inject: ['theme'],
data: () => ({}),
setup() {
const theme = useTheme();
const injectedTheme = inject('theme');
onMounted(() => {
theme.change(injectedTheme.value === 'dark' ? 'dark' : 'light');
});
watch(injectedTheme, value => {
theme.change(value === 'dark' ? 'dark' : 'light');
});
},
mounted() {
document.dispatchEvent(new CustomEvent('hydration-completed'));
},
head() {
return {
link: [{
rel: 'icon',
type: 'image/png',
href: 'favicon.png'
}]
};
}
};
</script><template>
<router-view style="overflow: hidden!important">
</router-view>
</template>
<script>
export default {
data: () => ({})
};
</script>
<style scoped></style><template>
<Box
style="padding:0px;overflow:visible;transition:background-color .3s linear;justify-content:center"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 60%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 60%, white)`}}}"
>
<Box
contain="{`default`:{`xs`:{`light`:true}}}"
style="justify-content:center"
paddingTop="{`default`:{`xs`:{`light`:`50px`}}}"
>
<slot>
<Box
contain="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px 40px;line-height:40px"
justifyContent="{`default`:{`sm`:{`light`:`space-between`}}}"
>
<Box width="{`default`:{`xs`:{`light`:`100%`},`sm`:{`light`:`auto`}}}">
<ul class="indent-2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</Box>
<Box width="{`default`:{`xs`:{`light`:`100%`},`sm`:{`light`:`auto`}}}">
<ul class="indent-2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</Box>
<Box width="{`default`:{`xs`:{`light`:`100%`},`sm`:{`light`:`auto`}}}">
<ul class="indent-2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</Box>
<Box width="{`default`:{`xs`:{`light`:`100%`},`sm`:{`light`:`auto`}}}">
<ul class="indent-2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</Box>
</Box>
</slot>
<Box
contain="{`default`:{`xs`:{`light`:true}}}"
style="justify-content:center;padding-top:40px"
paddingTop="{`default`:{`xs`:{`light`:`10px`}}}"
paddingBottom="{`default`:{`xs`:{`light`:`20px`}}}"
>
<hr style="width:100%" />
</Box>
<Box
contain="{`default`:{`xs`:{`light`:true}}}"
style="justify-content:center"
paddingTop="{`default`:{`xs`:{`light`:`50px`}}}"
paddingBottom="{`default`:{`xs`:{`light`:`80px`}}}"
>
<p
style="font-weight:100"
data-allow-mismatch
>© Copyright {{new Date().getFullYear()}} - {{ copyright }}</p>
</Box>
</Box>
</Box>
</template>
<script>
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
export default {
components: {
Title: Title,
Box: Box
},
props: {
copyright: {
type: String,
default: 'Your Company'
}
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Box
style="padding:0px;justify-content:center;overflow:visible;transition:background-color .3s linear;backdrop-filter:blur(5px)"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-transparent) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-transparent) 40%, black)`}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, white)`}}}"
class="shadow"
>
<Box
style="padding-top:0px;padding-bottom:0px;overflow:visible;width:100%"
paddingRight="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`0px`}}}"
paddingLeft="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`10px`}}}"
><router-link to="/">
<Box style="padding:0px;padding-top:12px;padding-bottom:10px;align-items:center">
<img
src="@/_templates/arctic/assets/logo.webp"
style="width:37px;height:40px;object-fit:contain;margin-right:15px"
/>
<span style="margin:0px;padding:0px;margin-left:-8px">Arctic</span>
</Box>
</router-link>
<Box
expand="{`default`:{`xs`:{`light`:true}}}"
style="justify-content:flex-end;padding:0px;align-items:center;overflow:visible"
>
<Navigator
backgroundColor="{`hover`:{`xs`:{`light`:`color-mix(in oklch, var(--color-transparent) 70%, white)`,`dark`:`color-mix(in oklch, var(--color-transparent) 75%, black)`}},`current`:{`xs`:{`light`:`color-mix(in oklch, var(--color-transparent) 80%, white)`,`dark`:`color-mix(in oklch, var(--color-transparent) 70%, black)`}},`active`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 30%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
style="height:100%;overflow:visible;transition:none;font-weight:250;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"
fontWeight="{`current`:{`xs`:{`light`:`600`}}}"
borderBottomWidth="{`default`:{`xs`:{`light`:`1px`},`md`:{`light`:`4px`}}}"
borderBottomColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 30%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 30%, black)`},`md`:{`light`:`#00000000`}}}"
borderTopColor="{`default`:{`xs`:{`light`:`#00000000`}}}"
toggleIcon="{`default`:{`xs`:{`light`:`--image-menu-dark-svg`,`dark`:`--image-menu-light-svg`}}}"
closeIcon="{`default`:{`xs`:{`light`:`--image-x-dark-svg`,`dark`:`--image-x-light-svg`}}}"
caretIcon="{`default`:{`xs`:{`light`:`--image-caret-dark-svg`,`dark`:`--image-caret-light-svg`}}}"
backgroundColorDrop="{`default`:{`md`:{`light`:`color-mix(in oklch, var(--color-neutral) 22%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 22%, black)`}},`hover`:{`md`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
gap="{`default`:{`xs`:{`light`:`20px`},`md`:{`light`:`5px`}}}"
childrenGap="{`default`:{`xs`:{`light`:`10px`}}}"
paddingLeft="{`default`:{`xs`:{`light`:`20px`},`md`:{`light`:`20px`}}}"
paddingRight="{`default`:{`xs`:{`light`:`20px`},`md`:{`light`:`20px`}}}"
paddingBottom="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`8px`}}}"
paddingTop="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`12px`}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 10%, white)`}}}"
backgroundColorModal="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
borderLeftWidth="{`default`:{`xs`:{`light`:`5px`},`md`:{`light`:`0px`}}}"
borderLeftColor="{`default`:{`xs`:{`light`:`#00000000`}}}"
paddingTopModal="35px"
translateXToggle="-7px"
translateYToggle="5px"
marginTop="{`default`:{`xs`:{`light`:`4px`}}}"
marginBottom="{`default`:{`xs`:{`light`:`4px`}}}"
justifyToggle="{`default`:{`xs`:{`light`:`center`}}}"
alignToggle="{`default`:{`xs`:{`light`:`end`}}}"
position="{`default`:{`xs`:{`light`:`relative`}}}"
borderRadius="{`default`:{`xs`:{`light`:`25px`}}}"
centerDropdown="true"
backgroundDropArea="{`default`:{`xs`:{`light`:`transparent`,`dark`:`transparent`},`md`:{`light`:`color-mix(in oklch, var(--color-neutral) 22%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 22%, black)`}}}"
borderRadiusDropArea="{`default`:{`md`:{`light`:`8px`}}}"
marginRight="{`default`:{`xs`:{`light`:`4px`}}}"
marginLeft="{`default`:{`xs`:{`light`:`4px`}}}"
>
<slot>
<Link
title="Home"
route="/"
icon="{`default`:{`xs`:{`light`:`--image-home-svg`,`dark`:`--image-home-light-svg`}}}"
>
</Link>
<Link
title="Dashboard"
route="/dashboard"
>
</Link>
<Link
title="More"
childrenBorderRadiusDrop="{`default`:{`xs`:{`light`:`8px`}}}"
itemDirection="left"
childrenBorderRadius="{`default`:{`xs`:{`light`:`25px`},`md`:{`light`:`12px`}}}"
borderRadiusDrop="{`default`:{`md`:{`light`:`8px`}}}"
>
<Link
title="Login"
route="/login"
itemDirection="left"
>
</Link>
<Link
title="External link"
route="https://vueplay.com"
external="true"
target="_blank"
>
</Link>
<Link
title="Redirect"
route="/redirect"
>
</Link>
<Link
title="Not found"
route="/not-found"
itemDirection="left"
>
</Link>
</Link>
<Link
title=" Github"
route="https://github.com/vueplayground/vueplay.com"
icon="{`default`:{`xs`:{`light`:`--image-gh-black-svg`,`dark`:`--image-gh-white-svg`}}}"
iconSize="30px"
paddingLeft="{`default`:{`md`:{`light`:`10px`}}}"
paddingRight="{`default`:{`md`:{`light`:`10px`}}}"
target="_blank"
external="true"
gap="{`default`:{`md`:{`light`:`10px`}}}"
>
</Link>
</slot>
</Navigator>
</Box>
</Box>
</Box>
</template>
<script>
import Link from '@vueplayio/link';
import Navigator from '@vueplayio/navigator';
import Box from '@vueplayio/box';
export default {
components: {
Link: Link,
Navigator: Navigator,
Box: Box
},
data: () => ({})
};
</script>
<style scoped>
*,
:global(body) {
--image-menu-light-svg: url(@/_templates/arctic/assets/menu-light.svg);
--image-x-light-svg: url(@/_templates/arctic/assets/x-light.svg);
--image-caret-light-svg: url(@/_templates/arctic/assets/caret-light.svg);
--image-home-svg: url(@/_templates/arctic/assets/home.svg);
--image-home-light-svg: url(@/_templates/arctic/assets/home-light.svg);
--image-gh-black-svg: url(@/_templates/arctic/assets/gh-black.svg);
--image-gh-white-svg: url(@/_templates/arctic/assets/gh-white.svg);
}
body * {
--image-menu-light-svg: url(@/_templates/arctic/assets/menu-light.svg);
--image-x-light-svg: url(@/_templates/arctic/assets/x-light.svg);
--image-caret-light-svg: url(@/_templates/arctic/assets/caret-light.svg);
--image-home-svg: url(@/_templates/arctic/assets/home.svg);
--image-home-light-svg: url(@/_templates/arctic/assets/home-light.svg);
--image-gh-black-svg: url(@/_templates/arctic/assets/gh-black.svg);
--image-gh-white-svg: url(@/_templates/arctic/assets/gh-white.svg);
}
</style><template>
<Box
style="padding:0px;justify-content:center;overflow:visible;transition:background-color .3s linear;backdrop-filter:blur(5px)"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-transparent) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-transparent) 40%, black)`}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, white)`}}}"
expand="{`default`:{`2xl`:{`light`:true}}}"
>
<Box
style="padding-top:0px;padding-bottom:0px;overflow:visible;width:100%;padding-right:0;padding-left:0"
paddingRight="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`40px`}}}"
paddingLeft="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`40px`}}}"
column="{`default`:{`xs`:{`light`:true}}}"
>
<Box
expand="{`default`:{`xs`:{`light`:true}}}"
style="justify-content:flex-start;align-items:center;overflow:visible"
paddingTop="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`0px`}}}"
paddingRight="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`0px`}}}"
paddingBottom="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`0px`}}}"
paddingLeft="{`default`:{`xs`:{`light`:`10px`},`md`:{`light`:`0px`}}}"
>
<Navigator
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-transparent) 25%, black)`},`md`:{`light`:`#00000000`}},`hover`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`},`sm`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
style="padding:0px;height:100%;overflow:visible;transition:none;font-weight:250"
fontWeight="{`current`:{`xs`:{`light`:`600`}}}"
toggleIcon="{`default`:{`xs`:{`light`:`--image-submenu-dark-svg`,`dark`:`--image-submenu-light-svg`}}}"
closeIcon="{`default`:{`xs`:{`light`:`--image-x-dark-svg`,`dark`:`--image-x-light-svg`}}}"
justifyToggle="{`default`:{`xs`:{`light`:`center`}}}"
caretIcon="{`default`:{`xs`:{`light`:`--image-caret-dark-svg`,`dark`:`--image-caret-light-svg`}}}"
backgroundColorDrop="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 25%, black)`}},`hover`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
alignToggle="{`default`:{`xs`:{`light`:`start`}}}"
gap="{`default`:{`xs`:{`light`:`0px`}}}"
childrenGap="{`default`:{`xs`:{`light`:`10px`}}}"
paddingLeft="{`default`:{`xs`:{`light`:`20px`},`md`:{`light`:`20px`}}}"
paddingRight="{`default`:{`xs`:{`light`:`20px`},`md`:{`light`:`20px`}}}"
paddingTop="{`default`:{`xs`:{`light`:`15px`}}}"
orientation="Column"
paddingBottom="{`default`:{`xs`:{`light`:`15px`}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 10%, white)`}}}"
borderLeftWidth="{`default`:{`xs`:{`light`:`5px`}}}"
borderLeftColor="{`default`:{`xs`:{`light`:`#00000000`}},`hover`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 60%, white)`,`dark`:`color-mix(in oklch, var(--color-primary) 60%, black)`}},`current`:{`xs`:{`light`:`var(--color-primary)`}},`active`:{`xs`:{`light`:`var(--color-primary)`}},`focus`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 60%, white)`,`dark`:`color-mix(in oklch, var(--color-primary) 60%, black)`}}}"
backgroundColorModal="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 25%, black)`}}}"
paddingTopModal="96px"
translateXToggle="calc(-100vw + 65px)"
toggleSize="30px"
borderBottomColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 30%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
borderBottomWidth="{`default`:{`xs`:{`light`:`1px`}}}"
>
<slot>
<Link
title="Home"
route="/"
icon="{`default`:{`xs`:{`light`:`--image-home-svg`,`dark`:`--image-home-light-svg`}}}"
>
</Link>
<Link
title="Dashboard"
route="/dashboard"
>
</Link>
<Link
title="Login"
route="/login"
itemDirection="left"
>
</Link>
<Link
title="More"
itemDirection="left"
>
<Link
title="About Vue Play"
route="https://vueplay.com"
external="true"
target="_blank"
>
</Link>
</Link>
<Link
title="Not found"
route="/not-found"
itemDirection="left"
>
</Link>
</slot>
</Navigator>
</Box>
</Box>
</Box>
</template>
<script>
import Link from '@vueplayio/link';
import Navigator from '@vueplayio/navigator';
import Box from '@vueplayio/box';
export default {
components: {
Link: Link,
Navigator: Navigator,
Box: Box
},
data: () => ({})
};
</script>
<style scoped>
* {
--menu-light-svg: url(@/_templates/arctic/assets/menu-light.svg);
--x-light-svg: url(@/_templates/arctic/assets/x-light.svg);
--caret-light-svg: url(@/_templates/arctic/assets/caret-light.svg);
--logo-svg: url(@/_templates/arctic/assets/logo.svg);
}
:global(body) {
--menu-light-svg: url(@/_templates/arctic/assets/menu-light.svg);
--x-light-svg: url(@/_templates/arctic/assets/x-light.svg);
--caret-light-svg: url(@/_templates/arctic/assets/caret-light.svg);
--logo-svg: url(@/_templates/arctic/assets/logo.svg);
}
</style><template>
<Box
style="padding:0px;overflow:visible;transition:background-color .3s linear"
backgroundColor="{`default`:{`xs`:{`light`:`var(--color-primary)`,`dark`:`color-mix(in oklch, var(--color-primary) 80%, black)`}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 40%, black)`,`dark`:`color-mix(in oklch, var(--color-primary) 40%, white)`}}}"
justifyContent="{`default`:{`xs`:{`light`:`flex-end`}}}"
>
<Navigator
style="padding:0px"
direction="right"
breakpointCap="0"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 0%, white)`,`dark`:`color-mix(in oklch, var(--color-primary) 0%, white)`}}}"
backgroundColor="{`default`:{`xs`:{`light`:`#00000000`,`dark`:`#00000000`}},`hover`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 80%, white)`,`dark`:`color-mix(in oklch, var(--color-primary) 70%, black)`}}}"
backgroundColorDrop="{`hover`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 80%, white)`,`dark`:`color-mix(in oklch, var(--color-primary) 70%, black)`}}}"
>
<slot>
<Link
style="padding:5px;padding-right:10px;padding-left:10px"
title="Login"
route="/login"
>
</Link>
</slot>
</Navigator>
<Box
v-if="themeToggler !== 'false'"
style="padding:0px 10px;align-items:center"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-primary) 20%, white)`,`dark`:`var(--color-primary)`}}}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4"
>
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
<LightDarkToggle style="margin-right:4px;margin-left:4px" />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-3 h-3"
>
<path
fill-rule="evenodd"
d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
clip-rule="evenodd"
/>
</svg>
</Box>
</Box>
</template>
<script>
import LightDarkToggle from '@/_templates/arctic/components/utilities/LightDarkToggle.vue';
import Link from '@vueplayio/link';
import Navigator from '@vueplayio/navigator';
import Box from '@vueplayio/box';
export default {
components: {
LightDarkToggle,
Link: Link,
Navigator: Navigator,
Box: Box
},
props: {
themeToggler: {
type: String,
default: 'true',
control: 'boolean'
}
},
data: () => ({})
};
</script>
<style scoped></style><template>
<button
style="position: relative; opacity: .8; transition: all .3s linear; width: 34px; height: 17px; box-sizing: border-box; border-radius: 50px; overflow: hidden;"
@click.stop="toggle"
:class="{
dark: storedTheme === 'dark',
light: storedTheme === 'light'
}"
:style="{ backgroundColor }"
>
<div
:style="{ backgroundColor: backgroundColorSwitch, left }"
style="position:absolute; width: calc((100% / 3) + 4px); aspect-ratio: 1/1; rounded: 50%; box-sizing: border-box; top: 1px; border-radius: 50%; transition: all .3s linear;"
></div>
</button>
</template>
<script>
export default {
data: () => ({
storedTheme: typeof global !== 'undefined' ? global?.theme : null
}),
mounted() {
this.storedTheme = localStorage.getItem('theme');
},
inject: ['theme', 'updateTheme'],
watch: {
theme() {
this.storedTheme = localStorage.getItem('theme');
}
},
computed: {
backgroundColor() {
if (this.theme === 'dark') return 'rgba(0, 0, 0, 0.8)';
return 'rgba(255, 255, 255, 0.8)';
},
backgroundColorSwitch() {
if (this.theme === 'dark') return 'rgba(255, 255, 255, 0.7)';
return 'rgba(0, 0, 0, 0.5)';
},
left() {
if (this.storedTheme === 'dark') return 'calc(100% - calc(100% / 3) - 5px)';
if (this.storedTheme === 'light') return '1px';
return 'calc(50% - (100% / 3 / 2) - 2px)';
}
},
methods: {
toggle() {
if (this.storedTheme === 'dark') {
this.updateTheme('light');
} else if (this.storedTheme === 'light') {
this.updateTheme(null);
} else {
this.updateTheme('dark');
}
}
}
};
</script>
<style scoped>
button:hover {
opacity: 1 !important;
}
</style><template>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;height:100vh;flex:1 1 auto"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, white)`}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
>
<slot name="topbar">
<Topbar style="position:sticky;top:0px"></Topbar>
</slot>
<slot name="header">
<Header style="position:sticky;top:34px"></Header>
</slot>
<slot>
<Box
style="justify-content:center;padding:0px"
expand="{`default`:{`xs`:{`light`:true}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;align-items:center;justify-content:center"
contain="{`default`:{`xs`:{`light`:true}}}"
>
<Box style="justify-content:center;;padding-top:100px;padding-bottom:100px">
<Title
style="text-align:center"
fontSize="{`default`:{`xs`:{`light`:`20px`},`sm`:{`light`:`30px`},`md`:{`light`:`40px`},`lg`:{`light`:`50px`},`xl`:{`light`:`60px`}}}"
lineHeight="{`default`:{`xs`:{`light`:`50px`}}}"
type="{`default`:{`xs`:{`light`:`h1`}}}"
>Drop anything here ...</Title>
</Box>
</Box>
</Box>
</slot>
<slot name="footer">
<Footer>
</Footer>
</slot>
</Box>
</template>
<script>
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
import Topbar from '@/_templates/arctic/components/topbars/TopbarDefault.vue';
import Header from '@/_templates/arctic/components/headers/HeaderDefault.vue';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
export default {
components: {
Title: Title,
Box: Box,
Topbar: Topbar,
Header: Header,
Footer: Footer
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Box
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
style="padding: 0px;overflow:auto"
column="{`default`:{`xs`:{`light`:true}}}"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, white)`}}}"
>
<Box
:height="'{`default`:{`xs`:{`light`:`' + headerHeight + 'px`}}}'"
style="position: sticky; top: 0px; overflow: visible; padding: 0px;z-index:11"
>
<slot name="topbar">
<Topbar style="width:100%;z-index:10"></Topbar>
</slot>
<slot name="header">
<Header style="width:100%;z-index:10"></Header>
</slot>
</Box>
<Box
style="padding: 0px"
:style="{top: headerHeight + 'px'}"
width="{`default`:{`xs`:{`light`:`100%`},`md`:{`light`:`200px`}}}"
:height="'{`default`:{`md`:{`light`:`calc(100% - ' + headerHeight + 'px)`}}}'"
overflow="{`default`:{`md`:{`light`:`auto`}}}"
position="{`default`:{`xs`:{`light`:`sticky`},`md`:{`light`:`fixed`}}}"
class="md:z-10 md:shadow"
>
<slot name="sidebar">
<Sidebar
style="width:100%;z-index:5"
class="md:shadow"
></Sidebar>
</slot>
</Box>
<Box
style="padding: 0px"
:height="'{`default`:{`md`:{`light`:`calc(100% - ' + headerHeight + 'px)`}}}'"
column="{`default`:{`xs`:{`light`:true},`md`:{`light`:false}}}"
expand="{`default`:{`xs`:{`light`:true}}}"
overflow="{`default`:{`xs`:{`light`:`visible`}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
>
<Box
style="padding: 0px;;min-width:0px"
expand="{`default`:{`xs`:{`light`:true}}}"
column="{`default`:{`xs`:{`light`:true}}}"
height="{`default`:{`md`:{`light`:`100%`}}}"
overflow="{`default`:{`md`:{`light`:`visible`}}}"
marginLeft="{`default`:{`md`:{`light`:`200px`}}}"
>
<slot>
<Box
expand="{`default`:{`xs`:{`light`:true}}}"
style="align-items:center;overflow:hidden"
>
<Title
style="text-align:center;width:100%"
fontSize="{`default`:{`xs`:{`light`:`20px`},`sm`:{`light`:`30px`},`md`:{`light`:`40px`},`lg`:{`light`:`50px`},`xl`:{`light`:`60px`}}}"
type="{`default`:{`xs`:{`light`:`h1`}}}"
paddingTop="{`default`:{`xs`:{`light`:`100px`}}}"
paddingBottom="{`default`:{`xs`:{`light`:`100px`}}}"
>Drop anything here ...</Title>
</Box>
</slot>
<Box style="min-height:100px;padding:0px">
<slot name="footer">
<Footer style="width:100%"></Footer>
</slot>
</Box>
</Box>
</Box>
</Box>
</template>
<script>
import Title from '@vueplayio/title';
import Topbar from '@/_templates/arctic/components/topbars/TopbarDefault.vue';
import Header from '@/_templates/arctic/components/headers/HeaderDefault.vue';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
import Sidebar from '@/_templates/arctic/components/sidebars/SidebarDefault.vue';
import Box from '@vueplayio/box';
export default {
props: {
headerHeight: {
type: Number,
default: 96,
control: 'slider'
}
},
components: {
Title: Title,
Topbar: Topbar,
Header: Header,
Footer: Footer,
Sidebar: Sidebar,
Box: Box
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;height:100vh;flex:1 1 auto"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, white)`}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
>
<slot name="topbar">
<Topbar style="position:sticky;top:0px"></Topbar>
</slot>
<slot name="header">
<Header style="position:sticky;top:34px"></Header>
</slot>
<slot>
<Box
style="justify-content:center;padding:0px"
expand="{`default`:{`xs`:{`light`:true}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;align-items:center;justify-content:center"
contain="{`default`:{`xs`:{`light`:true}}}"
>
<Box style="justify-content:center;;padding-top:100px;padding-bottom:100px">
<Title
style="text-align:center"
fontSize="{`default`:{`xs`:{`light`:`20px`},`sm`:{`light`:`30px`},`md`:{`light`:`40px`},`lg`:{`light`:`50px`},`xl`:{`light`:`60px`}}}"
lineHeight="{`default`:{`xs`:{`light`:`50px`}}}"
type="{`default`:{`xs`:{`light`:`h1`}}}"
>Drop anything here ...</Title>
</Box>
</Box>
</Box>
</slot>
<slot name="footer">
<Footer>
</Footer>
</slot>
</Box>
</template>
<script>
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
import Topbar from '@/_templates/arctic/components/topbars/TopbarDefault.vue';
import Header from '@/_templates/arctic/components/headers/HeaderDefault.vue';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
export default {
components: {
Title: Title,
Box: Box,
Topbar: Topbar,
Header: Header,
Footer: Footer
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;height:100vh;flex:1 1 auto;overflow:visible"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, white)`}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
>
<Box
style="justify-content:center;padding:0px;overflow:visible"
height="{`default`:{`xs`:{`light`:`calc(100% - 50px)`}}}"
expand="{`default`:{`xs`:{`light`:true}}}"
>
<Box
style="padding:0px;align-items:center;justify-content:center;overflow:visible"
contain="{`default`:{`xs`:{`light`:true}}}"
>
<Box
style="max-width:400px;border-radius:25px"
backgroundColor="{`default`:{`xs`:{`light`:`transparent`},`md`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 10%, black)`}}}"
column="{`default`:{`xs`:{`light`:true}}}"
margin="{`default`:{`xs`:{`light`:`30px`}}}"
>
<slot>
<Title
paddingLeft="{`default`:{`xs`:{`light`:`20px`}}}"
fontSize="{`default`:{`xs`:{`light`:`32px`}}}"
style="text-align:center"
>Add anything here ...</Title>
</slot>
</Box>
</Box>
</Box>
<slot name="footer">
<Footer>
</Footer>
</slot>
</Box>
</template>
<script>
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
export default {
components: {
Title: Title,
Box: Box,
Footer: Footer
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;height:100vh;flex:1 1 auto"
color="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 40%, black)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, white)`}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 10%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 40%, black)`}}}"
>
<slot name="topbar">
<Topbar style="position:sticky;top:0px"></Topbar>
</slot>
<slot name="header">
<Header style="position:sticky;top:34px"></Header>
</slot>
<slot>
<Box
style="justify-content:center;padding:0px"
expand="{`default`:{`xs`:{`light`:true}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;align-items:center;justify-content:center"
contain="{`default`:{`xs`:{`light`:true}}}"
>
<Box style="justify-content:center;;padding-top:100px;padding-bottom:100px">
<Title
style="text-align:center"
fontSize="{`default`:{`xs`:{`light`:`20px`},`sm`:{`light`:`30px`},`md`:{`light`:`40px`},`lg`:{`light`:`50px`},`xl`:{`light`:`60px`}}}"
lineHeight="{`default`:{`xs`:{`light`:`50px`}}}"
type="{`default`:{`xs`:{`light`:`h1`}}}"
>Drop anything here ...</Title>
</Box>
</Box>
</Box>
</slot>
<slot name="footer">
<Footer>
</Footer>
</slot>
</Box>
</template>
<script>
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
import Topbar from '@/_templates/arctic/components/topbars/TopbarDefault.vue';
import Header from '@/_templates/arctic/components/headers/HeaderDefault.vue';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
export default {
components: {
Title: Title,
Box: Box,
Topbar: Topbar,
Header: Header,
Footer: Footer
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Basic>
<template #topbar>
<Topbar style="position: sticky; top: 0px"></Topbar>
</template>
<template #header>
<Header style="position: sticky; top: 34px"></Header>
</template>
<template #default>
<Box
style="justify-content:center;padding:0px;min-height:calc(100vh - 60px)"
expand="{`default`:{`xs`:{`light`:true}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
style="padding:0px;align-items:center;justify-content:center"
contain="{`default`:{`xs`:{`light`:true}}}"
>
<Box style="justify-content:center;">
<Title
style="text-align:center"
fontSize="{`default`:{`xs`:{`light`:`40px`},`sm`:{`light`:`45px`},`md`:{`light`:`50px`},`lg`:{`light`:`60px`},`xl`:{`light`:`70px`}}}"
lineHeight="{`default`:{`xs`:{`light`:`50px`}}}"
type="{`default`:{`xs`:{`light`:`h1`}}}"
>Where quality takes shape</Title>
<Title
style="text-align:center;margin-top:30px;font-weight:326"
type="{`default`:{`xs`:{`light`:`h2`}}}"
fontSize="{`default`:{`xs`:{`light`:`16px`},`sm`:{`light`:`15px`},`md`:{`light`:`17px`},`lg`:{`light`:`22px`},`xl`:{`light`:`26px`}}}"
lineHeight="{`default`:{`xs`:{`light`:`27px`}}}"
>
Bring your ideas to life with <b style="font-weight:500">Vue Play</b>, a powerful and intuitive builder.
</Title>
</Box>
<Box
style="justify-content:center;"
paddingRight="{`default`:{`xs`:{`light`:`0px`}}}"
paddingLeft="{`default`:{`xs`:{`light`:`0px`}}}"
gap="{`default`:{`xs`:{`light`:`20px`},`sm`:{`light`:`30px`}}}"
>
<a
class="w-40 hover:shadow-none shadow-lg duration-200 ease-linear transition font-bold text-white rounded-lg p-4 hover:bg-emerald-500 bg-emerald-400"
style="text-align:center"
target="_blank"
href="https://vueplay.com"
>Start Journey</a> <router-link
class="w-40 hover:bg-fuchsia-700 bg-fuchsia-600 hover:shadow-none shadow-lg duration-200 ease-linear transition font-bold text-white rounded-lg p-4"
style="text-align:center"
to="/dashboard"
>Dashboard</router-link>
</Box>
</Box>
</Box>
</template>
<template #footer>
<Footer></Footer>
</template>
</Basic>
</template>
<script>
import Basic from '@/_templates/arctic/templates/Basic.vue';
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
import Topbar from '@/_templates/arctic/components/topbars/TopbarDefault.vue';
import Header from '@/_templates/arctic/components/headers/HeaderDefault.vue';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
export default {
components: {
Basic: Basic,
Title: Title,
Box: Box,
Topbar: Topbar,
Header: Header,
Footer: Footer
},
data: () => ({})
};
</script>
<style scoped></style><template>
<Dashboard headerHeight="96">
<template #topbar>
<Topbar style="width:100%;z-index:10"></Topbar>
</template>
<template #header>
<Header style="width:100%;z-index:10"></Header>
</template>
<template #sidebar>
<Sidebar style="position: sticky; top: 0px; width: 100%"></Sidebar>
</template>
<template #default>
<Box
style="padding:0px;min-height:200px;padding-bottom:100px"
expand="{`default`:{`xs`:{`light`:true}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true},`md`:{`light`:false}}}"
expand="{`default`:{`xs`:{`light`:true}}}"
width="{`default`:{`xs`:{`light`:`100%`}}}"
gap="{`default`:{`xs`:{`light`:`20px`}}}"
>
<Box
column="{`default`:{`md`:{`light`:true}}}"
gap="{`default`:{`xs`:{`light`:`20px`}}}"
style="padding:0px"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text fontWeight="{`default`:{`md`:{`light`:`200`}}}">Lorem ipsum dolor sit amet</Text>
</Box>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text fontWeight="{`default`:{`md`:{`light`:`200`}}}">Lorem ipsum dolor sit amet</Text>
</Box>
</Box>
<Box
column="{`default`:{`md`:{`light`:true}}}"
gap="{`default`:{`xs`:{`light`:`20px`}}}"
style="padding:0px"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
style="background-size:cover"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text
fontWeight="{`default`:{`md`:{`light`:`200`}}}"
style="margin-bottom:10px"
>Lorem ipsum dolor sit amet</Text>
<img
src="@/_templates/arctic/assets/placeholder.svg"
width="100"
height="100"
/>
</Box>
</Box>
</Box>
<Box
column="{`default`:{`xs`:{`light`:true},`md`:{`light`:false}}}"
expand="{`default`:{`xs`:{`light`:true}}}"
width="{`default`:{`xs`:{`light`:`100%`}}}"
gap="{`default`:{`xs`:{`light`:`20px`}}}"
paddingTop="{`default`:{`xs`:{`light`:`0px`}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text fontWeight="{`default`:{`md`:{`light`:`200`}}}">Lorem ipsum dolor sit amet</Text>
</Box>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text fontWeight="{`default`:{`md`:{`light`:`200`}}}">Lorem ipsum dolor sit amet</Text>
</Box>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text fontWeight="{`default`:{`md`:{`light`:`200`}}}">Lorem ipsum dolor sit amet</Text>
</Box>
</Box>
<Box
column="{`default`:{`xs`:{`light`:true},`md`:{`light`:false}}}"
expand="{`default`:{`xs`:{`light`:true}}}"
width="{`default`:{`xs`:{`light`:`100%`}}}"
gap="{`default`:{`xs`:{`light`:`20px`}}}"
paddingTop="{`default`:{`xs`:{`light`:`0px`}}}"
>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text
fontWeight="{`default`:{`md`:{`light`:`200`}}}"
style="margin-bottom:10px"
>Lorem ipsum dolor sit amet</Text>
<img
src="@/_templates/arctic/assets/placeholder.svg"
width="100"
height="100"
/>
</Box>
<Box
column="{`default`:{`xs`:{`light`:true}}}"
backgroundColor="{`default`:{`xs`:{`light`:`color-mix(in oklch, var(--color-neutral) 20%, white)`,`dark`:`color-mix(in oklch, var(--color-neutral) 20%, black)`}}}"
>
<Title
type="{`default`:{`md`:{`light`:`h2`}}}"
fontWeight="{`default`:{`md`:{`light`:`550`}}}"
>Title</Title>
<Text fontWeight="{`default`:{`md`:{`light`:`200`}}}">Lorem ipsum dolor sit amet</Text>
</Box>
</Box>
</Box>
</template>
<template #footer>
<Footer style="width: 100%"></Footer>
</template>
</Dashboard>
</template>
<script>
import Dashboard from '@/_templates/arctic/templates/Dashboard.vue';
import Topbar from '@/_templates/arctic/components/topbars/TopbarDefault.vue';
import Header from '@/_templates/arctic/components/headers/HeaderDefault.vue';
import Footer from '@/_templates/arctic/components/footers/FooterDefault.vue';
import Sidebar from '@/_templates/arctic/components/sidebars/SidebarDefault.vue';
import Text from '@vueplayio/text';
import Title from '@vueplayio/title';
import Box from '@vueplayio/box';
export default {
components: {
Text: Text,
Dashboard: Dashboard,
Title: Title,
Box: Box,
Topbar: Topbar,
Header: Header,
Footer: Footer,
Sidebar: Sidebar
},
data: () => ({})
};
</script>
<style scoped></style>Related templates
All landing pages →Free
$19Template · Landing pages
SaaS Landing
Complete Vue 3 SaaS landing page template with a drawn product UI, features, pricing toggle, testimonials and FAQ. Tailwind CSS 4, dark mode, typed.
by Vueplay
FreeTemplate · Error pages
404 Not Found Page
Friendly Vue 3 404 page with a drawn compass illustration, live search suggestions and helpful links, plus a compact 500 error variant. Tailwind CSS.
by Vueplay
$29Template · Dashboards
Admin Dashboard
A complete Vue 3 admin dashboard template with a collapsible sidebar, hand-drawn SVG charts, a sortable customers table and settings. Tailwind CSS, dark mode.
by Vueplay