I am looking for a way to seamlessly share my routes between my actix-web backend and Vue with Vue-Router frontend without needing separate route files. I want to define the routes on the frontend without having to make any changes on the server side. If there is a better solution out there, please let me know! 😄
In my src folder, I have a routes.jsonc file where each route follows this structure:
route: { path: String; name: String; componentName: String }
These route strings are then converted into actual Components using the following code snippet:
import { createRouter, createWebHistory } from "vue-router";
import ButtonArrayVue from "@/components/Home/ButtonArray.vue";
import App from "@/App.vue";
import * as routesImport from "../routes.jsonc";
const history = createWebHistory();
const routes = routesImport.map((route: { path: String; name: String; componentName: String }) => {
let component = function () {
switch (route.componentName) {
case "ButtonArray":
return ButtonArrayVue;
case "App":
return App;
}
};
return {
path: route.path,
name: route.name,
component: component,
};
});
export default createRouter({
history,
routes,
});
The issue arises when trying to import the JSON file with various attempts resulting in TypeScript and compiler errors. How can I import the JSON file without having it in the public folder and avoid making it accessible to the public?
Are there any alternative methods or better approaches to importing this JSON file?