How can i read the contents from a text file as a string in Nuxt (or Vue)?

Question

Id like to read the contents of a text file which i have imported in my .vue file like import ToS from '~/static/terms-of-service.txt';

I want to access the contents as a String.

How can I do it?

Answer 1

VUE CLI 3

1. First install the raw loader npm install raw-loader --save-dev

2. If you don't have a vue.config.js, make one at root and add

   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('raw')
         .test(/\.txt$/)
         .use('raw-loader')
         .loader('raw-loader')
         .end()
     }
   }
   

3. To get the text file as string (if placed in src/assets/txt/): import file from '@/assets/txt/file.txt'

N.B. Remember to rebuild

Answer 2

I'm using nuxt (created with vue cli 3), and this is what worked for me:

1. npm install --save-dev raw-loader
2. Update nuxt.config.js

  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {

      config.module.rules.push({
        enforce: 'pre',
        test: /\.txt$/,
        loader: 'raw-loader',
        exclude: /(node_modules)/
      });

    }
  }