wxsms / vue-md-loader Goto Github PK

This issue provides visibility into Renovate updates and their statuses. Learn more

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

• chore(deps): update dependency @babel/core to v7.17.2
• chore(deps): update dependency jest to v27.5.1
• chore(deps): update vue monorepo to v3.2.30 (@vue/compiler-sfc, vue)
• chore(deps): update pnpm/action-setup action to v2.1.0

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency vue to v3
• chore(deps): update dependency vue-loader to v17

• Check this box to trigger a request for Renovate to run again on this repository

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

vue-cli3
Syntax Error: TypeError: this.getOptions is not a function
how can i fix it?

Hello, is it possible to use this plugin with Vue 3?

I have tried several things, but always get errors.

e.g. when using this webpack.config.js:

or this vue.config.js:

when i use this loader, is there any options to be configured so that I can generate sourcemap for debug

当我在md文件上写vue代码的时候，发现他会报错
我的写法：

index.md

## test
<template></template>
<script></script>

错误：
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

请问怎么解决，我看vue-markdown-loader这个是可以渲染的

Hi. I'm looking for a little guidance here.

I'm trying to handle the loading state of my markdown component because it takes a moment to process, but the compiler can't find my markdown files when I use the advanced async component factory syntax (Vue 2).

https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

This WORKS:

<script>
const ArticleContent = () =>
  import("@/assets/articles/test-article/article.md");

export default {
  name: "Article",
  components: {
    ArticleContent,
  ...

This DOES NOT work:

<script>
const ArticleContent = () => ({
  component: import("@/assets/articles/test-article/article.md"),
  loading: LoaderComponent,
  error: ErrorComponent,
  delay: 200,  
  timeout: 3000
});

export default {
  name: "Article",
  components: {
    ArticleContent,
  ...

The 2nd method works fine with .vue files, but when I try to import a .md file with vue-md-loader, I get the error:

This dependency was not found:

* @/assets/articles/test-article/article.md in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Article.vue?vue&type=script&lang=js&

I have of course tried both @/path/to/article.md and ../path/to/article.md.

Any idea why this isn't working, or if I should use some other technique?

Thank you

这是 基于 webpack 的包吗？
vite 创建 ts + vue3 的项目不支持的吗？
配置各种报错。。。。

我现在很需要这个库，之前找了好久，今天在 element3 的项目中发现了。

Hi,
I am getting the below error on 2.0.1, but not on 2.0.0.

Error: Module build failed (from ./node_modules/vue-md-loader/index.js):
TypeError: this.getOptions is not a function
    at Object.module.exports (E:\git\project\node_modules\vue-md-loader\index.js:7:24)
    at eval (webpack-internal:///./src/assets/markdown.md:1:7)
    at Object../src/assets/markdown.md (https://localhost/js/app.js:5881:1)
    at __webpack_require__ (https://localhost/js/app.js:854:30)
    at fn (https://localhost/js/app.js:151:20)
    at VueComponent.created 
    ...

I could be totally wrong, but looking at the source and what changed, I would guess that loader-utils should not have been removed like they were in 59ae702. The v3 way of calling getOptions() makes it seem like we don't need the dependency but I guess we do.

Downgrading fixes it for me, but I thought it was worth pointing out anyway.

请问webpack对应如何配置,才能解析 markdown 加上样式

t.md

解析后

我的webpack是这么配置的,和你的demo配置的一样

  {
        test: /\.md$/,
        loaders: [
          'vue-loader',
          {
            loader: 'vue-md-loader',
            options: {
              preProcess (source) {
                console.log('pre', source)
                return source
              },
              afterProcess (result) {
                console.log('after', result)
                return result
              },
              afterProcessLiveTemplate (template) {
                return `<div class="live-wrapper">${template}</div>`
              },
              rules: {
                'table_open': () => '<div class="table-responsive"><table class="table">',
                'table_close': () => '</table></div>'
              },
              plugins: [
                [
                  require('markdown-it-anchor'),
                  {
                    permalink: true,
                    permalinkSymbol: '&#128279;'
                  }
                ]
              ]
            }
          }
        ]
      }

Usage

<template>
  <section>
    <tmd></tmd>
  </section>
</template>
<script>

  import tmd from '../../doc/t.md'
  export default {
    components: {
      tmd
    }
  }

这样是能将 markdown 解析成一个 components ，但没加上对应样式，都是默认的 html 标签，怎么加上样式呢，看你的源码有用到 highlight.js ，但没效果，还需如何配置呢

webpack: v5.52.0
vue-loader: v15.9.8

当构建项目时