Import a file as text with a single suffix

Add ?raw to import a file's contents as a string. Handy for showing source code or loading a shader without an extra request at runtime.

ts
import example from './examples/Counter.vue?raw'
import shader from './shaders/gradient.glsl?raw'

// Both imports are strings
console.log(example)
console.log(shader)

In Vue, render imported text with interpolation to keep it escaped.

vue
<template>
  <pre><code>{{ example }}</code></pre>
</template>

Use ?url instead when you need the asset URL. Imported content is shipped to the browser, so keep private files out of these imports.

Read the Vite documentation.