vite-plugin-virtual-plain-text

A Vite plugin to load file content as plain text from the virtual assets workspace.

This plugin maps virtual asset file paths to local file paths based on the project root.

Install

pnpm i -D vite-plugin-virtual-plain-text

yarn add -D vite-plugin-virtual-plain-text

npm install --save-dev vite-plugin-virtual-plain-text

Basic Usage

To treat all virtual asset imports as plain text:

// vite.config.(t|j)s

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-virtual-plain-text';

export default defineConfig({
  plugins: [
    plainText(),
  ],
});

You can now load the content of the LICENSE file in the project root:

// component.js

import LICENSE from '@virtual:plain-text/LICENSE'

console.log(LICENSE)

For TypeScript users, you can create a .dts file manually for referencing the virtual assets declaration:

// declaration.d.ts
/// <reference types="vite-plugin-virtual-plain-text/virtual-assets" />

Or, you can use the auto declaration file generation feature, as described in the Advanced Usage section below.

Advanced Usage

Options Reference

type PlainTextOptions = {
  virtualNamespace?: string,
  namedExport?: string | false,
  dtsAutoGen?: string | false,
}

Configure the virtual assets' workspace

// vite.config.(t|j)s

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-virtual-plain-text';

export default defineConfig({
  plugins: [
    // passing the custom virtual workspace name
    plainText({ virtualNamespace: '@my-virtual-plain-text-workspace/' }),
  ],
});

For TypeScript users, add a module declaration:

// declaration.d.ts

declare module '@my-virtual-plain-text-workspace/*' {
    export const plainText: string
}

Or, configure auto generation:

// vite.config.(t|j)s

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-virtual-plain-text';

export default defineConfig({
  plugins: [
    // passing the custom dts file pathname
    plainText({ virtualNamespace: '@my-virtual-plain-text-workspace/', dtsAutoGen: 'virtual-workspace-declaration' }),
  ],
});

virtual-workspace-declaration.d.ts will be created in the project's root directory.

Enabling Named Export

// vite.config.(t|j)s

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-virtual-plain-text';

export default defineConfig({
  plugins: [
    // passing the custom name of the named exporting variable
    plainText({ virtualNamespace: '@my-virtual-plain-text-workspace/', namedExport: 'plainText' }),
  ],
});

// component.js

import { plainText as LICENSE } from '@virtual:plain-text/LICENSE'

console.log(LICENSE)

License

MIT

Alternative

Plain text transformer: vite-plugin-plain-text