Skip to content

Instantly share code, notes, and snippets.

Created December 17, 2023 01:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save doubleedesign/6b5b8f48dada499bbd1aac458206a67d to your computer and use it in GitHub Desktop.
Vue component with customisable HTML element using "as" prop
<script setup lang="ts">
import Drawer from './components/Drawer.vue';
<div class="app-wrapper">
<Drawer position="left" :open="true" as="header">
<p>Stuff goes here</p>
<main class="page-content">
<!-- route outlet -->
<RouterView :key="$route.path"></RouterView>
<style scoped lang="scss">
// Styles
<script lang="ts">
import { defineComponent, PropType } from 'vue';
export default defineComponent({
props: {
position: String as PropType<'left' | 'right'>,
open: Boolean,
as: String as PropType<keyof HTMLElementTagNameMap>
data() {
return {
position: this.position ?? 'left',
open: ?? false,
as: ?? 'div',
<component :is="as" :class="['drawer',`drawer--${position}`, open && 'drawer--open']">
<style scoped lang="scss">
// Styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment