Skip to content

Instantly share code, notes, and snippets.

@tq-bit
Created March 17, 2022 18:29
Show Gist options
  • Save tq-bit/6afae78b592f11510114e56ffbb5f540 to your computer and use it in GitHub Desktop.
Save tq-bit/6afae78b592f11510114e56ffbb5f540 to your computer and use it in GitHub Desktop.
A vue composition API functional component for a Tailwind powered contained
<script setup lang="ts">
import { h, defineProps, withDefaults, Component } from 'vue';
interface AppContainerProps {
tag?: keyof HTMLElementTagNameMap;
flex?: boolean;
page?: boolean;
center?: boolean;
cols?: number;
}
const props = withDefaults(defineProps<AppContainerProps>(), {
tag: 'div',
flex: false,
page: false,
center: false,
cols: 12,
});
const flexClasses = ['flex', 'justify-between'];
const pageClasses = ['min-h-screen'];
const centerClasses = ['flex', 'items-center', 'justify-center'];
const isFlexBetween = props.flex && !props.center;
const isFlexCentered = props.center && !props.flex;
const isPage = props.page;
let classes = [
'container',
'mx-auto',
'px-4',
'w-12/12',
'md:px-0',
`md:w-${props.cols}/12`,
'max-w-screen-xl',
];
if (isFlexBetween) {
classes = [...classes, ...flexClasses];
}
if (isFlexCentered) {
classes = [...classes, ...centerClasses];
}
if (isPage) {
classes = [...classes, ...pageClasses];
}
const AppContainer: Component = (_, { slots, attrs }) => {
return h(props.tag, attrs, slots);
};
</script>
<template>
<app-container :class="classes">
<slot />
</app-container>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment