Load file as string in vue/vite project

Question

I have a vue/vie project in which I'm trying to read a markdown file I have into html using marked.

I attempted to use the fetch api to import it as a string, but only because I couldn't figure out how to use node.js code in vue.

Here's the vue file:

<script setup>
import { marked } from 'marked'
</script>

<script>
export default {
    data() {
        return {
            query: this.getQueryVariable("q"),
            markdown: ''
        }
    },
    mounted() {
        fetch('../src/markdown/About.md')
            .then(response => response.text())
            .then(text => this.markdown = text)
        document.querySelector('.marked').innerHTML = marked.parse(this.markdown)
    }
}
</script>

<template>
    <div class='marked'>
    </div>
</template>

Teahouse

Answer 1

You need to update the DOM inside the Promise callback, although doing this via Vue may be preferable:

fetch("../src/markdown/About.md")
  .then((response) => response.text())
  .then((text) => {
    this.markdown = text;
    document.querySelector(".marked").innerHTML = marked.parse(this.markdown);
  });

Delanos

Answer 2

With Vite, you can import assets as strings using the ?raw suffix and async/await:

const markdownFileContent = (await import(`path/to/markdown/file.md?raw`)).default;
const htmlString = marked.parse(markdownFileContent);

Tillford

Hello @Tillford , I liked your solution to load a text file and if I do with a window file where as path I put like 'C:\\test.txt' then it works well... but if I load a text file that has no extensions like /proc/cpuinfo that import treats it as URL so it can't be resolved...neither if I set as .//proc//cpuinfo... how I can set the stuff to make reading the file? Thanks in advance! – Weanling

Thanks. Also, for TypeScript you need some declaration similar to this: declare module '*?raw' { const text: string; export default text } – Howsoever

Answer 3

This can be achieved using the ?raw suffix:

Importing Asset as String

Assets can be imported as strings using the ?raw suffix.

import markdownString from './shader.md?raw'

You will need to add the assets to your vite.config:

export default defineConfig({
   ...
   assetsInclude: ["**/*.md"],
}

Gleiwitz

HI @Gleiwitz , I am facing an obstacle about that: in React Vite, if 1) I try to read on a Windows machine through browser a text file putting just c:\\test.txt then it reads it perfectly and I can show the content; 2) if I try to read /home/myuser/test.txt on Android's browser then it threats like an URL so I can't read the file... how I can tell to read that path just like absolute pat as like on Windows? – Weanling