[DOC] How to use?

[xialvjun]

trafficstars

I have a directory:

project
└── src
    └── map.vue

map.vue:

<template>
  <div @click="onClick">{{count}}</div>
</template>

<script lang="ts">
export default {
  data() {
    return { count: 0 };
  },
  method: {
    onClick() {
      this.count += 1;
    }
  }
}
</script>

<style lang="less" scoped>
div {
  color: red;
}
</style>

Then:

cd project
mkdist --format=esm --ext=vue -d

Then it get:

project
├── dist
│   └── map.vue
└── src
    └── map.vue

What I really want to get is:

project
├── dist
│   └── map.js
└── src
    └── map.vue

[pi0]

Hi @xialvjun. Actually, it is on purpose how it works with mkdist. By splitting/bundling .vue files, you probably also need extra .css chunks (*). mkdist preserves same .vue format but transforms <script> part for dist/map.vue so you can use typescript inside it. <style> tag with less is not supported yet so enduser needs to have less-loader installed if using lang="less"

(*) In traditional bundling methods, extracting CSS makes users always importing it from npm package regardless component used in page or not and by inlining in js, it adds extra overhead for runtime injection code.

[xialvjun]

I don't understand. If I still got a .vue file, how can I publish my vue component to npm without forcing the user config vue-cli to include node_modules/my_package.

[pi0]

By directly publishing dist/*.vue files to npm package. Users can simply point to my_package/dist/component.vue (or you can have an index.mjs exporting them by name)

Both vue-cli (src) and nuxt (src) (and any standard vue configuration) already transpile .vue files from node_modules.

[Lyokolux]

Is it possible to transpile from UMD or CJS to ESM with the tool? It is currently not clear, but it should be a killer feature if it is the case and mentioned in the documentation :)

I suppose as the [--format=cjs|esm] [--ext=mjs|js|ts] mention the CJS format. Anyway I will check it later.

[pi0]

@Lyokolux Feel free to open a new question if still is the case.