@dargmuesli/nuxt-vio 3.0.0-beta.1 → 3.0.0-beta.2

package/components/{_ → vio/_}/VioApp.vue

@@ -4,14 +4,15 @@
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <div>
         <NuxtPage />
-        <CookieControl :locale="locale as Locale" />
+        <CookieControl :locale="locale" />
       </div>
     </NuxtLayout>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+import type { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+import type { WritableComputedRef } from 'vue'
 
 export interface Props {
   ogImageAlt: string
@@ -25,11 +26,15 @@ const ogImageAltProp = toRef(() => props.ogImageAlt)
 const ogImageComponentProp = toRef(() => props.ogImageComponent)
 const siteDescriptionProp = toRef(() => props.siteDescription)
 
-const { locale } = useI18n()
+const { $dayjs } = useNuxtApp()
+const i18n = useI18n()
 const cookieControl = useCookieControl()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
+// data
+const locale = i18n.locale as WritableComputedRef<Locale>
+
 // methods
 const init = () => {
   if (process.client) {

package/components/{_ → vio/_}/VioError.vue

@@ -3,7 +3,7 @@
   <div>
     {{ description }}
   </div>
-  <div v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
+  <pre v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
 </template>
 
 <script setup lang="ts">

package/components/{layout → vio/layout}/VioLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 md:px-8">
+  <div class="container mx-auto p-4 md:px-8">
     <main>
       <slot />
     </main>

package/error.vue

@@ -18,6 +18,8 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {})
 const errorProp = toRef(() => props.error)
 
+// initialization
+useAppLayout()
 useServerHeadSafe({
   title: `${errorProp.value.statusCode} - ${errorProp.value.message}`,
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -49,7 +49,6 @@
     "@nuxtjs/tailwindcss": "6.8.0",
     "@pinia/nuxt": "0.4.11",
     "@tailwindcss/forms": "0.5.4",
-    "@tailwindcss/line-clamp": "0.4.4",
     "@tailwindcss/typography": "0.5.9",
     "@urql/core": "4.1.1",
     "@urql/devtools": "2.0.3",

package/plugins/dayjs.ts

@@ -26,18 +26,6 @@ export default defineNuxtPlugin((_nuxtApp) => {
   }
 })
 
-// declare module '#app' {
-//   interface NuxtApp {
-//     $dayjs: DayjsFn
-//   }
-// }
-
-// declare module 'nuxt/dist/app/nuxt' {
-//   interface NuxtApp {
-//     $dayjs: DayjsFn
-//   }
-// }
-
 /*
   [1]
   https://github.com/nuxt/framework/issues/7534#issuecomment-1248596609

package/tailwind.config.ts

@@ -2,7 +2,6 @@ import { Config } from 'tailwindcss'
 import colors from 'tailwindcss/colors'
 import { PluginAPI } from 'tailwindcss/types/config'
 import formsPlugin from '@tailwindcss/forms'
-import lineClampPlugin from '@tailwindcss/line-clamp'
 import typographyPlugin from '@tailwindcss/typography'
 
 const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
@@ -54,7 +53,6 @@ export default {
   darkMode: 'class',
   plugins: [
     formsPlugin,
-    lineClampPlugin,
     typographyPlugin,
     ({ addBase, addComponents, addUtilities, theme }: PluginAPI) => {
       addBase({

package/composables/useHeadLayout.ts

@@ -1,67 +0,0 @@
-export const useHeadLayout = () => {
-  const head = useLocaleHead({ addSeoAttributes: true })
-
-  useServerHeadSafe(head.value)
-  useServerHeadSafe({
-    bodyAttrs: {
-      class:
-        'bg-background-bright dark:bg-background-dark font-sans text-text-dark dark:text-text-bright',
-    },
-    // link: [
-    //   {
-    //     href: '/assets/static/favicon/apple-touch-icon.png?v=eEYRGn5b9R',
-    //     rel: 'apple-touch-icon',
-    //     sizes: '180x180',
-    //   },
-    //   {
-    //     href: '/assets/static/favicon/favicon-16x16.png?v=eEYRGn5b9R',
-    //     rel: 'icon',
-    //     sizes: '16x16',
-    //     type: 'image/png',
-    //   },
-    //   {
-    //     href: '/assets/static/favicon/favicon-32x32.png?v=eEYRGn5b9R',
-    //     rel: 'icon',
-    //     sizes: '32x32',
-    //     type: 'image/png',
-    //   },
-    //   {
-    //     href: '/favicon.ico?v=eEYRGn5b9R',
-    //     rel: 'icon',
-    //     type: 'image/x-icon',
-    //   },
-    //   {
-    //     href: '/assets/static/favicon/site.webmanifest?v=eEYRGn5b9R',
-    //     rel: 'manifest',
-    //   },
-    //   {
-    //     color: '#202020',
-    //     href: '/assets/static/favicon/safari-pinned-tab.svg?v=eEYRGn5b9R',
-    //     rel: 'mask-icon',
-    //   },
-    //   {
-    //     href: '/favicon.ico?v=eEYRGn5b9R',
-    //     rel: 'shortcut icon',
-    //   },
-    // ],
-    // meta: [
-    //   {
-    //     content: '/assets/static/favicon/browserconfig.xml?v=eEYRGn5b9R',
-    //     name: 'msapplication-config',
-    //   },
-    //   {
-    //     content: '#202020',
-    //     name: 'msapplication-TileColor',
-    //   },
-    //   {
-    //     content: '#202020',
-    //     name: 'theme-color',
-    //   },
-    // ],
-    // titleTemplate: (titleChunk?: string) => {
-    //   return titleChunk && titleChunk !== title
-    //     ? `${titleChunk} · ${title}`
-    //     : title
-    // },
-  })
-}