Implement layout composable
tugcekucukoglu
parent
cd54f04d7d
commit
23d6d6f9d6
|
|
@ -4,32 +4,33 @@
|
|||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import { onBeforeUnmount, onMounted } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
EventBus.on('dark-mode-toggle', this.darkModeToggleListener);
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('dark-mode-toggle', this.darkModeToggleListener);
|
||||
},
|
||||
methods: {
|
||||
darkModeToggleListener(event) {
|
||||
const { layoutState } = useLayout();
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
document.documentElement.classList.toggle('p-dark');
|
||||
layoutState.darkTheme = !layoutState.darkTheme;
|
||||
|
||||
EventBus.emit('dark-mode-toggle-complete');
|
||||
};
|
||||
|
||||
const darkModeToggleListener = (event) => {
|
||||
if (!document.startViewTransition) {
|
||||
this.toggleDarkMode(event);
|
||||
|
||||
toggleDarkMode(event);
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(() => this.toggleDarkMode(event));
|
||||
},
|
||||
toggleDarkMode() {
|
||||
document.documentElement.classList.toggle('p-dark');
|
||||
this.$appState.darkTheme = !this.$appState.darkTheme;
|
||||
|
||||
EventBus.emit('dark-mode-toggle-complete');
|
||||
}
|
||||
}
|
||||
document.startViewTransition(() => toggleDarkMode(event));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
EventBus.on('dark-mode-toggle', darkModeToggleListener);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
EventBus.off('dark-mode-toggle', darkModeToggleListener);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
:key="surface.name"
|
||||
type="button"
|
||||
@click="updateColors('surface', surface)"
|
||||
:class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : $appState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
|
||||
:class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : layoutState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
|
||||
:style="{ backgroundColor: `${surface.palette[500]}` }"
|
||||
></button>
|
||||
</div>
|
||||
|
|
@ -31,13 +31,13 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
primaryColors: [
|
||||
const { layoutState } = useLayout();
|
||||
|
||||
const primaryColors = ref([
|
||||
{ name: 'noir', palette: {} },
|
||||
{ name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
|
||||
{ name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
|
||||
|
|
@ -55,8 +55,9 @@ export default {
|
|||
{ name: 'fuchsia', palette: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' } },
|
||||
{ name: 'pink', palette: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' } },
|
||||
{ name: 'rose', palette: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' } }
|
||||
],
|
||||
surfaces: [
|
||||
]);
|
||||
|
||||
const surfaces = ref([
|
||||
{
|
||||
name: 'slate',
|
||||
palette: { 0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' }
|
||||
|
|
@ -89,48 +90,40 @@ export default {
|
|||
name: 'ocean',
|
||||
palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateColors(type, color) {
|
||||
]);
|
||||
|
||||
const selectedPrimaryColor = computed(() => layoutState.primary);
|
||||
const selectedSurfaceColor = computed(() => layoutState.surface);
|
||||
|
||||
const applyTheme = (type, color) => {
|
||||
Object.keys(color.palette).forEach((key) => {
|
||||
document.documentElement.style.setProperty(`--p-${type}-${key}`, color.palette[key]);
|
||||
});
|
||||
};
|
||||
|
||||
const updateColors = (type, color) => {
|
||||
if (type === 'primary') {
|
||||
this.$appState.primary = color.name;
|
||||
layoutState.primary = color.name;
|
||||
|
||||
if (color.name === 'noir') {
|
||||
document.documentElement.classList.add('p-noir');
|
||||
document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
|
||||
|
||||
this.applyTheme(
|
||||
applyTheme(
|
||||
type,
|
||||
this.surfaces.find((s) => s.name === this.$appState.surface)
|
||||
surfaces.value.find((s) => s.name === layoutState.surface)
|
||||
);
|
||||
} else {
|
||||
document.documentElement.classList.remove('p-noir');
|
||||
document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
|
||||
|
||||
this.applyTheme(type, color);
|
||||
applyTheme(type, color);
|
||||
}
|
||||
} else if (type === 'surface') {
|
||||
this.$appState.surface = color.name;
|
||||
this.applyTheme(type, color);
|
||||
layoutState.surface = color.name;
|
||||
applyTheme(type, color);
|
||||
}
|
||||
|
||||
EventBus.emit('theme-palette-change');
|
||||
},
|
||||
applyTheme(type, color) {
|
||||
Object.keys(color.palette).forEach((key) => {
|
||||
document.documentElement.style.setProperty(`--p-${type}-${key}`, color.palette[key]);
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedPrimaryColor() {
|
||||
return this.$appState.primary;
|
||||
},
|
||||
selectedSurfaceColor() {
|
||||
return this.$appState.surface;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,9 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import pkg from '@/package.json';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
version: pkg.version
|
||||
};
|
||||
}
|
||||
};
|
||||
const version = ref(pkg.version);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,16 @@
|
|||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import menudata from '@/assets/data/menu.json';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menu: menudata.data
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const menu = ref(menudata.data);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,11 +33,11 @@
|
|||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import Tag from '@/volt/tag';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
const props = defineProps({
|
||||
root: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
@ -46,17 +46,11 @@ export default {
|
|||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActiveRootmenuItem(menuitem) {
|
||||
return (
|
||||
menuitem.children &&
|
||||
!menuitem.children.some((item) => item.to === `/${this.$router.currentRoute.value?.name?.replaceAll('-', '/')}` || (item.children && item.children.some((it) => it.to === `/${this.$router.currentRoute.value.name}`)))
|
||||
);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Tag
|
||||
}
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isActiveRootmenuItem = (menuitem) => {
|
||||
return menuitem.children && !menuitem.children.some((item) => item.to === `/${router.currentRoute.value?.name?.replaceAll('-', '/')}` || (item.children && item.children.some((it) => it.to === `/${router.currentRoute.value.name}`)));
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div v-if="$appState.newsActive" class="layout-news">
|
||||
<div v-if="layoutState.newsActive" class="layout-news">
|
||||
<div class="layout-news-container">
|
||||
<i></i>
|
||||
<div class="layout-news-content">
|
||||
<span class="layout-news-text">{{ $appState.announcement.content }}</span>
|
||||
<a v-if="$appState.announcement.linkHref" class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
|
||||
<span class="layout-news-text">{{ layoutState.announcement.content }}</span>
|
||||
<a v-if="layoutState.announcement.linkHref" class="layout-news-link" :href="layoutState.announcement.linkHref">{{ layoutState.announcement.linkText }}</a>
|
||||
</div>
|
||||
<a class="layout-news-close" @click="onClose">
|
||||
<span class="pi pi-times"></span>
|
||||
|
|
@ -13,36 +13,36 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import News from '@/assets/data/news.json';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
const itemString = localStorage.getItem(this.$appState.storageKey);
|
||||
const { layoutState } = useLayout();
|
||||
|
||||
onMounted(() => {
|
||||
const itemString = localStorage.getItem(layoutState.storageKey);
|
||||
|
||||
if (itemString) {
|
||||
const item = JSON.parse(itemString);
|
||||
|
||||
if (!item.hiddenNews || item.hiddenNews !== News.id) {
|
||||
this.$appState.newsActive = true;
|
||||
this.$appState.announcement = News;
|
||||
layoutState.newsActive = true;
|
||||
layoutState.announcement = News;
|
||||
} else {
|
||||
this.$appState.newsActive = false;
|
||||
layoutState.newsActive = false;
|
||||
}
|
||||
} else {
|
||||
this.$appState.announcement = News;
|
||||
this.$appState.newsActive = true;
|
||||
layoutState.announcement = News;
|
||||
layoutState.newsActive = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.$appState.newsActive = false;
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
layoutState.newsActive = false;
|
||||
const item = {
|
||||
hiddenNews: this.$appState.announcement.id
|
||||
hiddenNews: layoutState.announcement.id
|
||||
};
|
||||
|
||||
localStorage.setItem(this.$appState.storageKey, JSON.stringify(item));
|
||||
}
|
||||
}
|
||||
localStorage.setItem(layoutState.storageKey, JSON.stringify(item));
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :ref="containerRef" class="layout-topbar">
|
||||
<div ref="container" class="layout-topbar">
|
||||
<div class="layout-topbar-inner">
|
||||
<div class="layout-topbar-logo-container">
|
||||
<PrimeVueNuxtLink to="/" class="layout-topbar-logo" aria-label="PrimeVue logo">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<button type="button" class="topbar-item" @click="toggleDarkMode">
|
||||
<i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
|
||||
<i :class="['pi', { 'pi-moon': layoutState.darkTheme, 'pi-sun': !layoutState.darkTheme }]"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="relative">
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
</button>
|
||||
<AppConfigurator />
|
||||
</li>
|
||||
<li v-if="showMenuButton" class="menu-button">
|
||||
<button type="button" class="topbar-item menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
|
||||
<li class="menu-button">
|
||||
<button type="button" class="topbar-item" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
|
||||
<i class="pi pi-bars"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
|
@ -74,75 +74,52 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
|
||||
export default {
|
||||
emits: ['menubutton-click'],
|
||||
props: {
|
||||
showMenuButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
scrollListener: null,
|
||||
container: null,
|
||||
mounted() {
|
||||
this.bindScrollListener();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.scrollListener) {
|
||||
this.unbindScrollListener();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMenuButtonClick(event) {
|
||||
this.$emit('menubutton-click', event);
|
||||
},
|
||||
toggleDarkMode() {
|
||||
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
|
||||
},
|
||||
bindScrollListener() {
|
||||
if (!this.scrollListener) {
|
||||
if (this.container) {
|
||||
this.scrollListener = () => {
|
||||
if (window.scrollY > 0) this.container.classList.add('layout-topbar-sticky');
|
||||
else this.container.classList.remove('layout-topbar-sticky');
|
||||
const emit = defineEmits(['menubutton-click']);
|
||||
|
||||
const { layoutState } = useLayout();
|
||||
|
||||
const container = ref(null);
|
||||
let scrollListener = null;
|
||||
|
||||
const onMenuButtonClick = (event) => {
|
||||
emit('menubutton-click', event);
|
||||
};
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
EventBus.emit('dark-mode-toggle', { dark: !layoutState.darkTheme });
|
||||
};
|
||||
|
||||
const bindScrollListener = () => {
|
||||
if (!scrollListener) {
|
||||
if (container.value) {
|
||||
scrollListener = () => {
|
||||
if (window.scrollY > 0) container.value.classList.add('layout-topbar-sticky');
|
||||
else container.value.classList.remove('layout-topbar-sticky');
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', this.scrollListener);
|
||||
},
|
||||
unbindScrollListener() {
|
||||
if (this.scrollListener) {
|
||||
window.removeEventListener('scroll', this.scrollListener);
|
||||
this.scrollListener = null;
|
||||
}
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
if (!this.outsideClickListener) {
|
||||
this.outsideClickListener = (event) => {
|
||||
if (this.isOutsideTopbarMenuClicked(event)) {
|
||||
this.unbindOutsideClickListener();
|
||||
}
|
||||
};
|
||||
window.addEventListener('scroll', scrollListener);
|
||||
};
|
||||
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
}
|
||||
},
|
||||
unbindOutsideClickListener() {
|
||||
if (this.outsideClickListener) {
|
||||
document.removeEventListener('click', this.outsideClickListener);
|
||||
this.outsideClickListener = null;
|
||||
}
|
||||
},
|
||||
isOutsideTopbarMenuClicked(event) {
|
||||
return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
|
||||
},
|
||||
containerRef(el) {
|
||||
this.container = el;
|
||||
}
|
||||
const unbindScrollListener = () => {
|
||||
if (scrollListener) {
|
||||
window.removeEventListener('scroll', scrollListener);
|
||||
scrollListener = null;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
bindScrollListener();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (scrollListener) {
|
||||
unbindScrollListener();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import { reactive } from 'vue';
|
||||
|
||||
const layoutState = reactive({
|
||||
primary: 'emerald',
|
||||
surface: 'zinc',
|
||||
darkTheme: false,
|
||||
codeSandbox: false,
|
||||
sourceType: 'options-api',
|
||||
newsActive: false,
|
||||
announcement: null,
|
||||
storageKey: 'primevue-tailwind'
|
||||
});
|
||||
|
||||
export function useLayout() {
|
||||
return { layoutState };
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="layout-wrapper" :class="containerClass">
|
||||
<div :class="containerClass">
|
||||
<AppNews />
|
||||
<AppTopBar @menubutton-click="onMenuButtonClick" />
|
||||
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
|
||||
|
|
@ -17,57 +17,50 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import Toast from '@/volt/toast';
|
||||
import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sidebarActive: false
|
||||
};
|
||||
},
|
||||
/*watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
if (!process.client || typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const { layoutState } = useLayout();
|
||||
const route = useRoute();
|
||||
const toast = useToast();
|
||||
const sidebarActive = ref(false);
|
||||
|
||||
this.sidebarActive = false;
|
||||
unblockBodyScroll('blocked-scroll');
|
||||
this.$toast.removeAllGroups();
|
||||
}
|
||||
}
|
||||
},*/
|
||||
methods: {
|
||||
onMenuButtonClick() {
|
||||
if (this.sidebarActive) {
|
||||
this.sidebarActive = false;
|
||||
unblockBodyScroll('blocked-scroll');
|
||||
} else {
|
||||
this.sidebarActive = true;
|
||||
blockBodyScroll('blocked-scroll');
|
||||
}
|
||||
},
|
||||
onMaskClick() {
|
||||
this.sidebarActive = false;
|
||||
unblockBodyScroll('blocked-scroll');
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
const containerClass = computed(() => {
|
||||
return [
|
||||
'layout-wrapper',
|
||||
{
|
||||
'layout-news-active': this.$appState.newsActive
|
||||
'layout-news-active': layoutState.newsActive
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Toast
|
||||
});
|
||||
|
||||
const onMenuButtonClick = () => {
|
||||
if (sidebarActive.value) {
|
||||
sidebarActive.value = false;
|
||||
unblockBodyScroll('blocked-scroll');
|
||||
} else {
|
||||
sidebarActive.value = true;
|
||||
blockBodyScroll('blocked-scroll');
|
||||
}
|
||||
};
|
||||
|
||||
const onMaskClick = () => {
|
||||
sidebarActive.value = false;
|
||||
unblockBodyScroll('blocked-scroll');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
// if (!import.meta.client || typeof window === 'undefined') {
|
||||
// return;
|
||||
// }
|
||||
|
||||
sidebarActive.value = false;
|
||||
unblockBodyScroll('blocked-scroll');
|
||||
toast.removeAllGroups();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,24 +7,30 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePrimeVue } from 'primevue/config';
|
||||
import { computed } from 'vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'custom'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: 'custom',
|
||||
props: {
|
||||
const props = defineProps({
|
||||
theme: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
landingClass() {
|
||||
return ['landing bg-surface-0 dark:bg-surface-900', { 'layout-news-active': this.$appState?.newsActive, 'layout-ripple-disabled': this.$primevue.config.ripple === false }];
|
||||
});
|
||||
|
||||
const { layoutState } = useLayout();
|
||||
const primevue = usePrimeVue();
|
||||
|
||||
const landingClass = computed(() => {
|
||||
return [
|
||||
'landing bg-surface-0 dark:bg-surface-900',
|
||||
{
|
||||
'layout-news-active': layoutState.newsActive,
|
||||
'layout-ripple-disabled': primevue.config.ripple === false
|
||||
}
|
||||
}
|
||||
};
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import PrimeVue from 'primevue/config';
|
||||
import StyleClass from 'primevue/styleclass';
|
||||
import ToastService from 'primevue/toastservice';
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.use(PrimeVue, {
|
||||
unstyled: true
|
||||
});
|
||||
nuxtApp.vueApp.directive('styleclass', StyleClass);
|
||||
nuxtApp.vueApp.use(ToastService);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue