Efficient management of pre-built assets in Vite

Question

Efficient management of pre-built assets in Vite

I am currently developing a Vue application using Vite. Within the content folder, I have numerous files (ranging from 10 to 100) located as follows:

content/block/paragraph.json
content/block/theorem.json
content/inliner/link.json
...

My goal is to create navigation data for my app and utilize this data within the app to generate a sidebar <nav>. In order to accomplish this, I need to extract specific data (the title property) from each individual json file.

Here's an example of the calculated nav structure that I aim to integrate into my app:

const nav = {
    "block/paragraph": "Paragraph", // Retrieved from 'content/block/paragraph.json'
    "block/theorem": "Theorem", // Extracted from 'content/block/theorem.json'
    // ...
}

The challenge lies in the fact that performing these operations within the Vue app itself is not ideal, as it may introduce delays and result in unnecessary network traffic due to loading all json files.

Is there a way to construct the nav object (or function) prior to initiating the Vue app, and then utilize the pre-generated data within the app?

In this scenario, three potential solutions come to mind, yet I'm uncertain which approach is optimal:

Implement a separate script for generating the navigation data (although this method lacks the convenience of utilizing Vite features like advanced imports and necessitates running the script independently before npm run dev, while also creating a .temp folder for storing the nav data)
Virtual Module. While promising, this solution entails converting the module into a string to function properly, a process I struggle to grasp completely...
Consider some form of Vite plugin other than Virtual Module?

What represents the optimal strategy for resolving this predicament?

On a broader note, is there a convenient methodology for preparing data and conducting computations prior to launching the application, followed by employing said data within the app?

typescript vue.js vite

Answer 1

Answer №1

Utilize the power of import.meta.glob:

Discover more about glob import here!

In this code snippet, we are selectively importing only the title property from JSON files, optimizing performance:

const files = import.meta.glob('./content/**/*.json', { eager: true, import: 'title' });
export default Object.keys(files).reduce((result, key) => (result[key.slice(2, -5)] = files[key], result), {});

https://i.sstatic.net/60oPxRBM.png

Answer 2

Utilize the power of import.meta.glob:

Discover more about glob import here!

In this code snippet, we are selectively importing only the title property from JSON files, optimizing performance:

const files = import.meta.glob('./content/**/*.json', { eager: true, import: 'title' });
export default Object.keys(files).reduce((result, key) => (result[key.slice(2, -5)] = files[key], result), {});

https://i.sstatic.net/60oPxRBM.png

Answer 3

Answer №2

Resolved the issue by implementing Virtual Module:

// vite/nav.ts

/**
 * Reading files and more:
 *
 * const files = globSync(...);
 * fs.readFileSync(...);
 * ...
 */

class NavDataResult { /* ... */ }
const navData = /* ... */;
function fetchNavData(query: string) { /* ... */ }

//
// Vite Plugin
//

export default function navigation(): Plugin
{
    const moduleId = 'virtual:nav';
    const resolvedModuleId = '\0' + moduleId;

    return {
        name: 'generated-navigation',
        resolveId(id)
        {
            if (id === moduleId)
                return resolvedModuleId;
        },
        load(id)
        {
            if (id === resolvedModuleId)
            {
                return `
                    const NavDataResult = ${NavDataResult.toString()}
                    const navData = ${JSON.stringify(navData)}
                    export default ${fetchNavData.toString()}`;
            }
        }
    }
}

Next, in our vite.config.ts file we include the virtual module:

// vite.config.ts

import navigation from './vite/nav';

export default defineConfig({ /* ... */ plugins: [navigation()] });

We also add type definitions to vite-env.d.ts to prevent VS Code errors when importing from unknown virtual:nav:

// vite-env.d.ts

/// <reference types="vite/client" />

declare module 'virtual:nav' {
    type funcReturn = import('../vite/nav').NavDataResult;
    const result: (query: string) => funcReturn;
    export default result;
}

With these changes, the virtual module can now be utilized within our application. Great success!

<script setup lang="ts">
// Navigation.vue

import fetchNavData from 'virtual:nav';

console.log(fetchNavData('paragraph'));
</script>

Answer 4

Resolved the issue by implementing Virtual Module:

// vite/nav.ts

/**
 * Reading files and more:
 *
 * const files = globSync(...);
 * fs.readFileSync(...);
 * ...
 */

class NavDataResult { /* ... */ }
const navData = /* ... */;
function fetchNavData(query: string) { /* ... */ }

//
// Vite Plugin
//

export default function navigation(): Plugin
{
    const moduleId = 'virtual:nav';
    const resolvedModuleId = '\0' + moduleId;

    return {
        name: 'generated-navigation',
        resolveId(id)
        {
            if (id === moduleId)
                return resolvedModuleId;
        },
        load(id)
        {
            if (id === resolvedModuleId)
            {
                return `
                    const NavDataResult = ${NavDataResult.toString()}
                    const navData = ${JSON.stringify(navData)}
                    export default ${fetchNavData.toString()}`;
            }
        }
    }
}

Next, in our vite.config.ts file we include the virtual module:

// vite.config.ts

import navigation from './vite/nav';

export default defineConfig({ /* ... */ plugins: [navigation()] });

We also add type definitions to vite-env.d.ts to prevent VS Code errors when importing from unknown virtual:nav:

// vite-env.d.ts

/// <reference types="vite/client" />

declare module 'virtual:nav' {
    type funcReturn = import('../vite/nav').NavDataResult;
    const result: (query: string) => funcReturn;
    export default result;
}

With these changes, the virtual module can now be utilized within our application. Great success!

<script setup lang="ts">
// Navigation.vue

import fetchNavData from 'virtual:nav';

console.log(fetchNavData('paragraph'));
</script>

Efficient management of pre-built assets in Vite

Answer №1

Answer №2

Similar questions

As I attempt to log in, the GitHub API is sending back a message stating that authentication

How can I populate dropdown options from an API in a react JS project using typescript and react saga?

Issue with CSS files in Jest"errors"

Retrieving the final selection made in vuetify v-select

Guide to releasing a NestJs library on npm using the nrwl/nx framework

Unable to dispatch actions within the mounted lifecycle hook in Vuex?

Sort through the files for translation by utilizing a feature within Typewriter

Having difficulty displaying multiple markers on a map using a Vue browser script

Ways to retrieve the identifier of a specific element within an array

Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

The specified data type is not compatible with the current context and cannot be treated as an array

Angular is not able to access the value of a promise in a different function after it has been retrieved

Data that is loaded asynchronously will not display rendered

React | Utilizing ForwardedRefs with React Components

Tips for retrieving and presenting information from a JSON document in a React TypeScript application

Is it possible to use Angular signals instead of rxJS operators to handle API calls and responses effectively?

Data has not been loaded into the Angular NGX Datatable

Guide to making a Material Design Radial effect animation

What is the best way to retrieve the value of the selected mat-option?

Interpolating SVG and HTML attributes in Vue.js