@studio-fes/layer-strapi 0.2.18 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @studio-fes/layer-strapi
 
+## 0.3.0
+
+### Minor Changes
+
+- Simplified env variables and fixed minor changes on components
+
 ## 0.2.18
 
 ### Patch Changes

package/app/components/StrapiMedia.vue

@@ -14,12 +14,12 @@ const isImage = computed(() => mediaIsImage(props.media))
 </script>
 
 <template>
-  <StrapiImage
+  <LazyStrapiImage
     v-if="isImage"
     v-bind="imgProps"
     :image="media"
   />
-  <StrapiVideo
+  <LazyStrapiVideo
     v-else-if="isVideo"
     v-bind="videoProps"
     :video="media"
@@ -27,6 +27,10 @@ const isImage = computed(() => mediaIsImage(props.media))
     <template #default="{ progress, isPlaying }">
       <slot name="media-chrome" :progress :is-playing />
     </template>
-  </StrapiVideo>
-  <pre v-else>There is no format for you.</pre>
+  </LazyStrapiVideo>
+  <slot v-else name="empty">
+    <DevOnly>
+      There is no format for you.
+    </DevOnly>
+  </slot>
 </template>

package/nuxt.config.ts

@@ -1,4 +1,7 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import { parseEnv } from './parse-env'
+
+const { graphqlEndpoint, hostname } = parseEnv()
+
 export default defineNuxtConfig({
   extends: ['@studio-fes/layer-base'],
 
@@ -13,11 +16,15 @@ export default defineNuxtConfig({
 
   graphqlMiddleware: {
     downloadSchema: false,
-    graphqlEndpoint: 'https://example.com/graphql',
+    graphqlEndpoint,
     serverApiPrefix: '/gql',
     clientCache: {
       enabled: true,
     },
     autoImportPatterns: ['./queries/**/*.gql'],
   },
+
+  image: {
+    domains: [hostname],
+  },
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studio-fes/layer-strapi",
   "type": "module",
-  "version": "0.2.18",
+  "version": "0.3.0",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@nuxt/eslint": "latest",
@@ -10,12 +10,12 @@
     "vue-strapi-blocks-renderer": "1.1.1"
   },
   "devDependencies": {
-    "@types/node": "^25.6.0",
-    "eslint": "^10.2.1",
-    "nuxt": "^4.4.2",
+    "@types/node": "^25.9.3",
+    "eslint": "^10.5.0",
+    "nuxt": "^4.4.8",
     "typescript": "^6.0.3",
     "vue": "latest",
-    "@studio-fes/layer-base": "0.2.18"
+    "@studio-fes/layer-base": "0.3.0"
   },
   "description": "Create Nuxt extendable layer with this GitHub template.",
   "repository": {

package/parse-env.ts

@@ -0,0 +1,23 @@
+export function parseEnv() {
+  const backendUrl = import.meta.env.NUXT_PUBLIC_BACKEND_URL
+  if (!backendUrl) {
+    throw new Error('NUXT_PUBLIC_BACKEND_URL environment variable is not set')
+  }
+
+  let graphqlEndpoint: string
+  let hostname: string
+  try {
+    const baseUrl = new URL(backendUrl)
+    hostname = baseUrl.hostname
+    if (!hostname) {
+      throw new Error('Missing hostname in NUXT_PUBLIC_BACKEND_URL environment variable')
+    }
+    graphqlEndpoint = new URL('graphql', baseUrl).toString()
+  }
+
+  catch {
+    throw new Error('Invalid NUXT_PUBLIC_BACKEND_URL environment variable')
+  }
+
+  return { graphqlEndpoint, hostname }
+}