Roadmap

[mesqueeb]

I'm in a never-ending quest to finding the best way to prepare a standalone vue component for publishing on NPM.

vue-compile is great for Vue 2 components.

Is there a roadmap with features you plan to create for Vue 3?

Especially when it comes to typing & auto completion in Vue 3. I wonder how components should be typed in the first place for optimal support in VSCode with eg. Vetur. And I'd love to know if this is on the roadmap for vue-compile or not : )

[mesqueeb]

@egoist I'm already a supporter, but would it be possible to pay a one-time donation to request an article that discusses publishing vue components on NPM.

With eg. the title: How to publish a Vue 3 component on NPM
with info on:

• how to convert the style from sass to css (eg. with example how it's done in this package, and how to do it for Vue 3)
• how to type your props & expose this in the types file of the NPM package.
• should we transform <script lang="ts"> to JS or not?
  • → Are there any pros publishing as lang="ts" that outweigh the cons of it being only consumable in TS projects?

I'm having a hard time finding resources that discuss the things above, and would be interested in getting your vision on the issue.

[egoist]

how to convert the style from sass to css

vue-compile turns <style lang="sass"> to <style> tag, sass code is also transformed to css accordingly, standalone sass files are also handled (https://github.com/egoist/vue-compile#compile-standalone-css-files)

how to type your props & expose this in the types file of the NPM package.

The official guide demonstrates how to annotate props: https://v3.vuejs.org/guide/typescript-support.html#annotating-props

It seems Vetur won't show type hints when you use components written in .vue, so it's probably better to use rollup-plugin-vue with rollup-plugin-typescript2 to output both .js file and .d.ts file.

should we transform <script lang="ts"> to JS or not?

Yes for me, many users don't use TypeScript at all. Doing this will also save some compile time for the user.

[mesqueeb]

@egoist did your opinion change on publishing components to NPM with lang="ts" ?

Also, do you use vue-tsc --declaration --emitDeclarationOnly to create type .d.ts for your standalone components before you publish ?

(I'm looking for guidance on the best way to publish standalone Vue components.)

[mesqueeb]

I'm having difficulties with understanding why this doesn't work : S

The component from NPM gives me the correct type info when I hover over it (the one I created with vue-tsc --declaration --emitDeclarationOnly) but inside of <template> it just says any again...

[egoist]

Are you using Volar?

It seems Volar won't pick up some-package/index.d.ts if you import some-package/index.vue, so I can think of two ways to publish vue components:

1. compile .vue to .js, generate .d.ts using vue-tsc as well
2. publish .vue as is, do not transform <script lang="ts"> block either

[mesqueeb]

@egoist thanks for your advice. Yeah, I switched to Volar from Vetur.

if I go for:

publish .vue as is, do not transform <script lang="ts"> block either

will people still be able to use it in non-TS projects?
I'm guessing yes for Vite but no for Webpack (Vue-cli / Quasar) etc?

[egoist]

I'm guessing yes for Vite but no for Webpack (Vue-cli / Quasar) etc?

yes

[mesqueeb]

@egoist thanks for the clarification!
So I'll have to compile to .js either way... 😅 do you have any advice on how to do this?

I might prepare a separate import path for the .js one...

[egoist]

So I'll have to compile to .js either way... 😅 do you have any advice on how to do this?

using the rollup plugin? or use Vite

[mesqueeb]

@egoist cheers! i'm going to test it and see how it goes. i'll report back here : )

[mesqueeb]

@egoist final question on this:

It seems Volar won't pick up some-package/index.d.ts if you import some-package/index.vue

do you know if this is a known issue we can track in the Volar repo? I searched in the Volar repo but couldn't find anything on it.

[egoist]

nope, maybe you can open a feature request Luca Ban ***@***.***> 于 2021年12月17日周五 上午12:42写道：

…

@egoist <https://github.com/egoist> final question on this: It seems Volar won't pick up some-package/index.d.ts if you import some-package/index.vue do you know if this is a known issue we can track in the Volar repo? I searched in the Volar repo but couldn't find anything on it. — Reply to this email directly, view it on GitHub <#158 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACDAWSC5NH4MCRSZXUIW5RLURIJHHANCNFSM4PTCMGZA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mesqueeb]

@egoist After struggling with rollup for more than half a day, I ended up getting help from a friend to set up Vite.
This is what I use now and it works really good:

vite.config.js

const vue = require('@vitejs/plugin-vue')
const path = require('path')
const { defineConfig } = require('vite')
const pkg = require('./package.json')
const nameCamel = pkg.name
const namePascal = nameCamel.replace(/(^\w|-\w)/g, (c) => c.replace('-', '').toUpperCase())
const external = Object.keys(pkg.dependencies || [])

module.exports = defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: namePascal,
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue', ...external],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": "."
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "strict": true,
    "allowJs": true,
    "target": "es6",
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "types": ["node", "webpack-env"]
  },
  "include": ["src/index.ts", "./src/**/*.ts", "./src/**/*.vue", "./shims.d.ts"],
  "exclude": ["./dist", "node_modules"]
}

shims.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

dependencies to install

    "@vitejs/plugin-vue": "^2.0.1",
    "typescript": "^4.5.4",
    "vite": "^2.7.3",
    "vue": "^3.2.26",
    "vue-tsc": "^0.29.8"

scripts to run

    "gen:types": "vue-tsc --declaration --emitDeclarationOnly",
    "build": "rimraf dist && vite build && npm run gen:types"

then just run npm run build

Works like a charm! 🎉

[egoist]

brilliant, i think you can just use the vite vue plugin instead of the rollup plugin

[mesqueeb]

@egoist thanks!! I've replaced it and it works just as well!

I also updated the post above.