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), {});

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), {});

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

In Stripe.js, the background color and height of the credit card input cannot be customized

Error encountered in React component: TypeScript TS2339 states that the property 'xyz' is not found on type 'IntrinsicAttributes...'

Challenges arise when trying to access environment variables using react-native-dotenv in React

The POST requests on Next JS Mock API endpoints include parameters passed in the req.body

Loading Vue.js components with themes without using Vue.use

Adjust the width of a div based on a dynamic value in VUE 3

Sharing OAuth token between Vue.js components

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

Why does it fire off numerous requests even though I only called it once?

Guide to integrating Inversify with Mocha

The subscribe method in Angular TS may be marked as deprecated, but worry not as it is still

The attribute 'y' is not found within the data type 'number'

Switching Visibility of Map Layers through an External Component

Installing the Quasar UI framework into an existing Vue JS project can be done with just a few

Navigate to the parent element in the DOM

Unable to execute OAuth2 with Okta using angular-oauth2-oidc framework

Receiving NULL data from client side to server side in Angular 2 + Spring application

Trouble with Vue select not linking to the model

Enhancing JEST testing efficiency using vue.js

Using CKEditor5 to Capture and Edit Key Presses