Skip to content

Instantly share code, notes, and snippets.

@doubleedesign
Created December 17, 2023 01:24
Show Gist options
  • Save doubleedesign/6b5b8f48dada499bbd1aac458206a67d to your computer and use it in GitHub Desktop.
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';
</script>
<template>
<div class="app-wrapper">
<Drawer position="left" :open="true" as="header">
<p>Stuff goes here</p>
</Drawer>
<main class="page-content">
<!-- route outlet -->
<RouterView :key="$route.path"></RouterView>
</main>
</div>
</template>
<style scoped lang="scss">
// Styles
</style>;
<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: this.open ?? false,
as: this.as ?? 'div',
};
}
});
</script>;
<template>
<component :is="as" :class="['drawer',`drawer--${position}`, open && 'drawer--open']">
<slot></slot>
</component>
</template>
<style scoped lang="scss">
// Styles
</style>;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment