How to Import Markdown Files in Vue CLI + TypeScript Projects

Recently, I came across the need to import a markdown file in a Vue component and realized that the internet is full of confusing solutions. Fiddled around for a few hours and found out that it's really quite simple.

Here's a little bit about the setup I have.

I am also using the Vue Markdown component. What I wanted to do is

So I imported the markdown file in my component and the first thing I saw is the squiggly telling me this.

TS2307: Cannot find module './'.

That's because TypeScript doesn't know where to find this module or is it even a module. To fix this, I went to shims-vue.d.ts and declared any markdown file as a module.

declare module "*.md";

...and the squiggly was gone.

NOTE: You can do this do any kind of file. In my project I also declare all scss files to be module so I can import them directly in my component. Read more on why I do that.

Once that's sorted, I came across this.

Module parse failed: Unexpected character '#' (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See

Which means that Webpack has no idea about how to load a markdown file as a module. Quick googling pointed out that I need to use raw-loader to get the content of the file as is.

A loader for webpack that allows importing files as a String.

I installed raw-loader as dev dependency.

yarn add -D raw-loader

Next I needed to direct webpack to use it via vue.config.js. Here's what that configuration looks like.

module.exports = {
configureWebpack: {
module: {
rules: [
test: /\.md$/i,
loader: "raw-loader",

That did it for me. I was able to import markdown file in my component just like any other module and use it.

import guideContent from "./";

Hope this helps you save a lot of time fiddling around.