@dargmuesli/nuxt-vio 2.0.0-beta.1 → 2.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/app.config.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import { useSeoMeta } from '@unhead/vue'
2
2
 
3
- import { SITE_NAME } from './utils/constants'
4
-
5
3
  export default defineAppConfig({
6
4
  legalNotice: undefined as
7
5
  | {
@@ -47,7 +45,8 @@ export default defineAppConfig({
47
45
  }
48
46
  }
49
47
  | undefined,
50
- seoMeta: undefined as Parameters<typeof useSeoMeta>[0] | undefined,
51
- siteName: SITE_NAME,
52
- themeColor: undefined as string | undefined,
48
+ seoMeta: {
49
+ twitterSite: '@dargmuesli',
50
+ } as Parameters<typeof useSeoMeta>[0] | undefined,
51
+ themeColor: '#202020' as string | undefined,
53
52
  })
@@ -1,20 +1,26 @@
1
1
  <template>
2
- <div :data-is-loading="isLoading">
2
+ <div :data-is-loading="isLoading" data-testid="is-loading">
3
3
  <NuxtLayout>
4
- <SeoKit :site-description="siteDescription" :language="locale" />
5
- <OgImageStatic :alt="ogImageAlt" component="OgImage" />
6
- <NuxtPage />
7
- <CookieControl :locale="locale" />
4
+ <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
5
+ <div>
6
+ <NuxtPage />
7
+ <CookieControl :locale="locale as Locale" />
8
+ </div>
8
9
  </NuxtLayout>
9
10
  </div>
10
11
  </template>
11
12
 
12
13
  <script setup lang="ts">
14
+ import { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
15
+
13
16
  export interface Props {
14
17
  siteDescription: string
15
18
  ogImageAlt: string
19
+ ogImageComponent?: string
16
20
  }
17
- withDefaults(defineProps<Props>(), {})
21
+ const props = withDefaults(defineProps<Props>(), {
22
+ ogImageComponent: undefined,
23
+ })
18
24
 
19
25
  const { locale } = useI18n()
20
26
  const cookieControl = useCookieControl()
@@ -36,9 +42,18 @@ watch(
36
42
  window.location.reload()
37
43
  }
38
44
  },
39
- { deep: true }
45
+ { deep: true },
40
46
  )
47
+
41
48
  // initialization
49
+ updateSiteConfig({
50
+ description: props.siteDescription,
51
+ })
52
+ defineOgImage({
53
+ alt: props.ogImageAlt,
54
+ component: props.ogImageComponent,
55
+ description: props.siteDescription,
56
+ })
42
57
  useAppLayout()
43
58
  useFavicons()
44
59
  </script>
@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
49
49
  })
50
50
 
51
51
  const emit = defineEmits<{
52
- (e: 'click'): void
52
+ click: []
53
53
  }>()
54
54
 
55
55
  // computations
@@ -1,22 +1,31 @@
1
1
  <template>
2
- <h1>{{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}</h1>
2
+ <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
3
+ <div>
4
+ {{ description }}
5
+ </div>
6
+ <div v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
3
7
  </template>
4
8
 
5
9
  <script setup lang="ts">
6
10
  import { status } from '@http-util/status-i18n'
7
11
 
8
12
  export interface Props {
9
- statusCode?: number
13
+ statusCode: number
14
+ statusMessage?: string
15
+ description: string
16
+ stack?: string
10
17
  }
11
18
  const props = withDefaults(defineProps<Props>(), {
12
- statusCode: undefined,
19
+ statusMessage: undefined,
20
+ stack: undefined,
13
21
  })
14
22
 
23
+ const runtimeConfig = useRuntimeConfig()
15
24
  const { locale, t } = useI18n()
16
25
 
17
26
  // computations
18
27
  const statusReason = computed(() => {
19
- return status(props.statusCode, locale) || t('error')
28
+ return status(props.statusCode, locale.value) || t('error')
20
29
  })
21
30
  </script>
22
31
 
@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
41
41
  })
42
42
 
43
43
  const emit = defineEmits<{
44
- (e: 'click'): void
44
+ click: []
45
45
  }>()
46
46
 
47
47
  const route = useRoute()
package/error.vue CHANGED
@@ -1,21 +1,23 @@
1
1
  <template>
2
2
  <NuxtLayout>
3
3
  <VioError
4
- :status-code="error?.statusCode ? +error?.statusCode : undefined"
4
+ :status-code="error.statusCode"
5
+ :status-message="error.statusMessage"
6
+ :description="error.message"
7
+ :stack="error.stack"
5
8
  />
6
9
  </NuxtLayout>
7
10
  </template>
8
11
 
9
12
  <script setup lang="ts">
10
- export type Error = { statusCode: string }
13
+ import { NuxtError } from 'nuxt/app'
14
+
11
15
  export interface Props {
12
- error?: Error
16
+ error: NuxtError
13
17
  }
14
- const props = withDefaults(defineProps<Props>(), {
15
- error: undefined,
16
- })
18
+ const props = withDefaults(defineProps<Props>(), {})
17
19
 
18
20
  useHead({
19
- title: props.error?.statusCode?.toString(),
21
+ title: `${props.error.statusCode} - ${props.error.message}`,
20
22
  })
21
23
  </script>
package/i18n.config.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { I18N_VUE_CONFIG } from './utils/constants'
2
+
3
+ export default defineI18nConfig(() => I18N_VUE_CONFIG)
@@ -0,0 +1,3 @@
1
+ {
2
+ "globalLoading": "Lade..."
3
+ }
@@ -0,0 +1,3 @@
1
+ {
2
+ "globalLoading": "Loading..."
3
+ }
package/nuxt.config.ts CHANGED
@@ -1,14 +1,18 @@
1
1
  import { dirname, join } from 'node:path'
2
2
  import { fileURLToPath } from 'node:url'
3
3
 
4
- import { LOCALES, SITE_NAME } from './utils/constants'
4
+ import { I18N_MODULE_CONFIG, SITE_NAME } from './utils/constants'
5
5
 
6
6
  const currentDir = dirname(fileURLToPath(import.meta.url))
7
7
 
8
8
  const BASE_URL =
9
9
  'https://' +
10
10
  (process.env.NUXT_PUBLIC_STACK_DOMAIN ||
11
- `${process.env.HOST || 'localhost'}:3000`)
11
+ `${process.env.HOST || 'localhost'}:${
12
+ !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
13
+ ? '3000'
14
+ : '3001'
15
+ }`)
12
16
 
13
17
  // https://v3.nuxtjs.org/api/configuration/nuxt.config
14
18
  export default defineNuxtConfig({
@@ -24,12 +28,12 @@ export default defineNuxtConfig({
24
28
  title: SITE_NAME, // fallback data to prevent invalid html at generation
25
29
  },
26
30
  },
27
- extends: ['nuxt-seo-kit'],
28
31
  modules: [
29
32
  '@dargmuesli/nuxt-cookie-control',
30
33
  '@nuxtjs/html-validator',
31
34
  '@nuxtjs/i18n',
32
35
  '@nuxtjs/tailwindcss',
36
+ 'nuxt-seo-kit-module',
33
37
  ],
34
38
  nitro: {
35
39
  compressPublicAssets: true,
@@ -37,20 +41,16 @@ export default defineNuxtConfig({
37
41
  runtimeConfig: {
38
42
  public: {
39
43
  googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
40
- ...{
41
- siteName: SITE_NAME,
42
- siteUrl: BASE_URL,
44
+ i18n: {
45
+ baseUrl: BASE_URL,
43
46
  },
47
+ isInProduction: process.env.NODE_ENV === 'production',
48
+ isTesting: false,
44
49
  },
45
50
  },
46
51
  typescript: {
47
52
  shim: false,
48
53
  strict: true,
49
- tsConfig: {
50
- vueCompilerOptions: {
51
- htmlAttributes: [], // https://github.com/johnsoncodehk/volar/issues/1970#issuecomment-1276994634
52
- },
53
- },
54
54
  },
55
55
 
56
56
  // modules
@@ -105,24 +105,26 @@ export default defineNuxtConfig({
105
105
  logLevel: 'warning',
106
106
  },
107
107
  i18n: {
108
- baseUrl: BASE_URL,
108
+ ...I18N_MODULE_CONFIG,
109
109
  defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
110
110
  detectBrowserLanguage: {
111
111
  cookieSecure: true,
112
- redirectOn: 'root',
113
- },
114
- locales: LOCALES,
115
- vueI18n: {
116
- fallbackWarn: false, // covered by linting
117
- missingWarn: false, // covered by linting
118
112
  },
119
113
  },
120
114
  linkChecker: {
121
- failOn404: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
115
+ failOnError: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
122
116
  },
123
- site: {
117
+ seoKit: {
124
118
  splash: false,
125
119
  },
120
+ site: {
121
+ debug: process.env.NODE_ENV === 'development',
122
+ name: SITE_NAME,
123
+ url: BASE_URL,
124
+ },
125
+ sitemap: {
126
+ exclude: ['/api/**'],
127
+ },
126
128
  tailwindcss: {
127
129
  cssPath: join(currentDir, './assets/css/tailwind.css'),
128
130
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dargmuesli/nuxt-vio",
3
- "version": "2.0.0-beta.1",
3
+ "version": "2.0.0-beta.3",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -8,18 +8,20 @@
8
8
  "engines": {
9
9
  "node": "20"
10
10
  },
11
- "packageManager": "pnpm@8.4.0",
11
+ "packageManager": "pnpm@8.6.11",
12
12
  "files": [
13
13
  "assets",
14
14
  "components",
15
15
  "composables",
16
16
  "layouts",
17
+ "locales",
17
18
  "server",
18
19
  "pages",
19
20
  "plugins",
20
21
  "utils",
21
22
  "app.config.ts",
22
23
  "error.vue",
24
+ "i18n.config.ts",
23
25
  "nuxt.config.ts",
24
26
  "tailwind.config.ts"
25
27
  ],
@@ -31,41 +33,48 @@
31
33
  "preview": "nuxi preview .playground",
32
34
  "prepare": "pnpm husky install && pnpm nuxt prepare .playground",
33
35
  "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
36
+ "lint:fix": "pnpm lint:js --fix && pnpm lint:ts --fix && pnpm lint:style --fix",
34
37
  "lint:js": "eslint --cache --ext .js,.ts,.vue --ignore-path .gitignore .",
35
38
  "lint:staged": "pnpm lint-staged",
36
39
  "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
37
40
  "lint:ts": "nuxt typecheck"
38
41
  },
39
42
  "dependencies": {
40
- "@dargmuesli/nuxt-cookie-control": "5.8.5",
41
- "@http-util/status-i18n": "0.6.2",
42
- "@nuxtjs/html-validator": "1.2.5",
43
- "@nuxtjs/i18n": "8.0.0-beta.10",
44
- "@nuxtjs/tailwindcss": "6.6.7",
43
+ "@dargmuesli/nuxt-cookie-control": "6.1.5",
44
+ "@dargmuesli/nuxt-vio": "link:",
45
+ "@http-util/status-i18n": "0.7.0",
46
+ "@nuxtjs/html-validator": "1.5.2",
47
+ "@nuxtjs/i18n": "8.0.0-rc.1",
48
+ "@nuxtjs/tailwindcss": "6.8.0",
45
49
  "@tailwindcss/typography": "0.5.9",
46
- "nuxt-seo-kit": "1.3.8",
47
- "sweetalert2": "11.7.5",
50
+ "nuxt-seo-kit-module": "2.0.0-beta.9",
51
+ "sweetalert2": "11.7.20",
48
52
  "vue-gtag": "2.0.1"
49
53
  },
50
54
  "devDependencies": {
51
- "@commitlint/cli": "17.6.3",
52
- "@commitlint/config-conventional": "17.6.3",
53
- "@intlify/eslint-plugin-vue-i18n": "2.0.0",
55
+ "@commitlint/cli": "17.6.7",
56
+ "@commitlint/config-conventional": "17.6.7",
57
+ "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
54
58
  "@nuxtjs/eslint-config-typescript": "12.0.0",
55
- "eslint": "8.40.0",
56
- "eslint-config-prettier": "8.8.0",
59
+ "eslint": "8.46.0",
60
+ "eslint-config-prettier": "8.9.0",
57
61
  "eslint-plugin-nuxt": "4.0.0",
58
- "eslint-plugin-prettier": "4.2.1",
59
- "eslint-plugin-yml": "1.5.0",
62
+ "eslint-plugin-prettier": "5.0.0",
63
+ "eslint-plugin-yml": "1.8.0",
60
64
  "husky": "8.0.3",
61
- "lint-staged": "13.2.2",
62
- "nuxt": "3.4.3",
63
- "prettier": "2.8.8",
64
- "stylelint": "15.6.1",
65
- "stylelint-config-recommended-vue": "1.4.0",
66
- "stylelint-config-standard": "33.0.0",
67
- "stylelint-no-unsupported-browser-features": "6.1.0",
68
- "typescript": "5.0.4",
69
- "vue-tsc": "1.6.4"
65
+ "lint-staged": "13.2.3",
66
+ "nuxt": "3.6.5",
67
+ "prettier": "3.0.0",
68
+ "stylelint": "15.10.2",
69
+ "stylelint-config-recommended-vue": "1.5.0",
70
+ "stylelint-config-standard": "34.0.0",
71
+ "stylelint-no-unsupported-browser-features": "7.0.0",
72
+ "typescript": "5.1.6",
73
+ "vue-tsc": "1.8.8"
74
+ },
75
+ "pnpm": {
76
+ "overrides": {
77
+ "eslint-plugin-vue": "9.15.1"
78
+ }
70
79
  }
71
80
  }
@@ -13,6 +13,6 @@ export default defineNuxtPlugin((nuxtApp) => {
13
13
  id: config.public.googleAnalyticsId,
14
14
  },
15
15
  },
16
- router
16
+ router,
17
17
  )
18
18
  })
@@ -0,0 +1,3 @@
1
+ {
2
+ "extends": "../.nuxt/tsconfig.server.json"
3
+ }
@@ -7,7 +7,7 @@ const heading = (theme: PluginAPI['theme']) =>
7
7
  fontWeight: theme('fontWeight.bold'),
8
8
  overflow: 'hidden',
9
9
  textOverflow: 'ellipsis',
10
- } as Record<string, string>)
10
+ }) as Record<string, string>
11
11
 
12
12
  const gray = colors.gray // or slate, zinc, neutral, stone
13
13
 
@@ -1,16 +1,23 @@
1
- import { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
2
-
3
- export const CYPRESS_BASE_URL = 'http://localhost:3000'
4
- export const LOCALES: LocaleObject[] = [
5
- {
6
- code: 'en',
7
- name: 'English',
8
- iso: 'en', // Will be used as catchall locale by default.
9
- },
10
- {
11
- code: 'de',
12
- name: 'Deutsch',
13
- iso: 'de',
14
- },
15
- ]
1
+ export const I18N_MODULE_CONFIG = {
2
+ langDir: 'locales',
3
+ lazy: true,
4
+ locales: [
5
+ {
6
+ code: 'en',
7
+ file: 'en.json',
8
+ name: 'English',
9
+ iso: 'en', // Will be used as catchall locale by default.
10
+ },
11
+ {
12
+ code: 'de',
13
+ file: 'de.json',
14
+ name: 'Deutsch',
15
+ iso: 'de',
16
+ },
17
+ ],
18
+ } // `langDir`, `lazy` and `locales` must be configured to extend a layer having lazy-loaded translations (https://v8.i18n.nuxtjs.org/guide/layers#locales)
19
+ export const I18N_VUE_CONFIG = {
20
+ fallbackWarn: false, // covered by linting
21
+ missingWarn: false, // covered by linting
22
+ }
16
23
  export const SITE_NAME = 'Vio'
package/utils/testing.ts DELETED
@@ -1,7 +0,0 @@
1
- export const isTesting = () => process.client && window.Cypress
2
-
3
- declare global {
4
- interface Window {
5
- Cypress: any
6
- }
7
- }