Import Text in Vue.js

Question

I am working on my personal website, and I would like to display an expanded form of my cover letter in the middle of the page. Is there a way to import the contexts of a .txt file into a Vue component? The contents is static, so I would like for it to occur at compile time so that it is wrapped in a <p> or <div> tag in the HTML.

try to read this forum.vuejs.org/t/importing-text-file-as-string-in-vue-cli-3/… — Герман Швецов
– Герман Швецов, Commented Mar 3, 2020 at 23:03
Thank you, I was able to get it working from that link, and have submitted an answer with my solution. — gangwerz
– gangwerz, Commented Mar 3, 2020 at 23:49

gangwerz · Accepted Answer · 2020-03-03 23:48:21Z

3

I was able able to get the text imported by using the contents of the link shared in the comments here.

What I did was install the raw-loader webpack package from NPM, then in my component, I import the text as a string, split the string by double newlines, and pass that in the data property function. In the template, I was able to iterate over the array I created with the split(), and generate <span>'s for each paragraph.

<template>
  <div id="app">
    <p>
      <span class="pg" v-for="paragraph in letter" :key="paragraph">
          {{paragraph}}
      </span>
    </p>
  </div>
</template>

<script>
import Letter from 'raw-loader!./assets/letter.txt'

export default {
  name: 'App',
  data: function () {
      return {
          letter: Letter.split("\n\n")
      }
  },
  components: {
  }
}
</script>

<style>
#app {
.pg {
    display: block;
}
</style>

answered Mar 3, 2020 at 23:48

gangwerz

4553 gold badges8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bartburkhardt Over a year ago

I tried that but get message: This dependency was not found: * raw-loader!./assets/test.txt

root Over a year ago

@bartburkhardt check the anwser again. "What I did was install the raw-loader webpack package from NPM"

Collectives™ on Stack Overflow

Import Text in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related