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