refactor!: use KIRBY_CONTENT_API_SLUG env var

Author: johannschopplich

.env.development.example

@@ -6,9 +6,7 @@ KIRBY_CACHE=false
 KIRBY_DEV_HOSTNAME=127.0.0.1
 KIRBY_DEV_PORT=8080
 KIRBY_DEV_PROTOCOL=http
-VITE_DEV_PORT=3000
+KIRBY_CONTENT_API_SLUG=app
 
+VITE_DEV_PORT=3000
 VITE_STALE_WHILE_REVALIDATE=false
-
-# API slug to fetch JSON-encoded page data from
-CONTENT_API_SLUG=app

.env.production.example

@@ -6,9 +6,7 @@ KIRBY_CACHE=false
 KIRBY_DEV_HOSTNAME=127.0.0.1
 KIRBY_DEV_PORT=8080
 KIRBY_DEV_PROTOCOL=http
-VITE_DEV_PORT=3000
+KIRBY_CONTENT_API_SLUG=app
 
+VITE_DEV_PORT=3000
 VITE_STALE_WHILE_REVALIDATE=false
-
-# API slug to fetch JSON-encoded page data from
-CONTENT_API_SLUG=app

README.md

@@ -265,7 +265,7 @@ For example, setting `KIRBY_CACHE` to `true` is useful in production environment
 
 To change the API slug to fetch JSON-encoded page data from, set
 
-- `CONTENT_API_SLUG` to a value of your liking (defaults to `spa`). It can even be left empty to omit a slug altogether!
+- `KIRBY_CONTENT_API_SLUG` to a value of your liking (defaults to `app`). It can even be left empty to omit a slug altogether!
 
 > You can't use Kirby's internal API slug (defaults to `api`). If you insist on using `api` for _your_ content endpoint, you can rename Kirby's by adding a `KIRBY_API_SLUG` key and set it to something other than `api`.
 

site/plugins/kirby-vue-kit/classes/VueKit.php

@@ -111,7 +111,7 @@ public function preloadJson(string $name): string
 
         return Html::tag('link', '', [
             'rel' => 'preload',
-            'href' => $base . '/' . Url::path(env('CONTENT_API_SLUG')) . '/' . $name . '.json',
+            'href' => $base . '/' . Url::path(env('KIRBY_CONTENT_API_SLUG')) . '/' . $name . '.json',
             'as' => 'fetch',
             'type' => 'application/json',
             'crossorigin' => 'anonymous'

site/plugins/kirby-vue-kit/routes.php

@@ -4,7 +4,7 @@
 use Kirby\Http\Response;
 use JohannSchopplich\VueKit\Page;
 
-$apiLocation = Url::path(env('CONTENT_API_SLUG', ''), false, true);
+$apiLocation = Url::path(env('KIRBY_CONTENT_API_SLUG', ''), false, true);
 
 return [
     /**

src/composables/useLanguages.js

@@ -1,7 +1,7 @@
 /**
  * Indicates a multi-language setup
  */
-const isMultilang = import.meta.env.VITE_MULTILANG === "true";
+const isMultilang = import.meta.env.KIRBY_MULTILANG === "true";
 
 /**
  * Current language code

src/modules/kirbytext.js

@@ -1,6 +1,6 @@
 let router;
 const origin = import.meta.env.DEV
-  ? import.meta.env.VITE_BACKEND_URL
+  ? `${process.env.KIRBY_DEV_PROTOCOL}://${process.env.KIRBY_DEV_HOSTNAME}:${process.env.KIRBY_DEV_PORT}`
   : window.location.origin;
 
 /**

vite.config.js

@@ -4,20 +4,15 @@ import Vue from "@vitejs/plugin-vue";
 import Components from "unplugin-vue-components/vite";
 
 const root = "src";
+const envPrefix = ["VITE_", "KIRBY_"];
 
 export default defineConfig(({ mode }) => {
-  Object.assign(
-    process.env,
-    loadEnv(mode, process.cwd(), ["VITE_", "KIRBY_", "CONTENT_"])
-  );
-
-  process.env.VITE_BACKEND_URL = `${process.env.KIRBY_DEV_PROTOCOL}://${process.env.KIRBY_DEV_HOSTNAME}:${process.env.KIRBY_DEV_PORT}`;
-  process.env.VITE_BACKEND_API_SLUG = process.env.CONTENT_API_SLUG;
-  process.env.VITE_MULTILANG = process.env.KIRBY_MULTILANG;
+  Object.assign(process.env, loadEnv(mode, process.cwd(), envPrefix));
 
   return defineConfig({
     root,
     base: mode === "development" ? "/" : "/dist/",
+    envPrefix,
 
     resolve: {
       alias: {