How to build Vue component library?

As per antfu’s blog we can bundle Vue components. I have followed it but getting error. here are the files I have

// package.json
{
  "name": "components",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "build": "unbuild"
  },
  "dependencies": {
    "@vueuse/core": "^8.5.0",
    "vue": "^3.2.21"
  },
  "devDependencies": {
    "typescript": "^4.6.4",
    "unbuild": "^0.7.4",
    "vue-tsc": "^0.34.15"
  }
}

// build.config.ts
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  entries: [
    // bundling
    'src/index',
    // bundleless, or just copy assets
    { input: 'src/components/', outDir: 'dist/components' }, // this works but not generating MyComponent.vue.d.ts
  ],
  declaration: true,
})

// src/index.ts
import InputAmount from './components/InputAmount.vue'
export { InputAmount }

<!--  src/components/InputAmount.vue  -->
<script setup lang="ts">
import { watchDebounced, useMagicKeys } from '@vueuse/core'
import { computed, ref, watch } from 'vue'

const prop = defineProps({
  placeholder: { default: '0', type: [String, Number] },
  value: { default: '', type: [String, Number] },
  min: { default: '0', type: [String, Number] },
  max: { default: '', type: [String, Number] },
  step: { default: '0.01', type: String },
  readonly: { default: false, type: Boolean },
})
const emit = defineEmits({ change: (value: string) => value })

const input = ref(`${prop.value}` || '')
let wasValueChanged = false

const keys = useMagicKeys()
const shiftArrowUp = keys['Shift+ArrowUp']
const shiftCmd = keys['Shift+cmd']
const shiftCtrl = keys['Shift+Ctrl']
const arrowUp = keys['ArrowUp']
const steps = computed((): string => {
  if ((shiftCmd.value || shiftCtrl.value) && arrowUp) return '10'
  if (shiftArrowUp.value) return '1'
  return prop.step
})

const onChange = () => {
  // prevent infinite event loop
  if (wasValueChanged || input.value === prop.value) {
    wasValueChanged = false
    return
  }
  emit('change', input.value)
}

watchDebounced(input, onChange, { debounce: 700 })
watch(
  () => prop.value,
  () => {
    input.value = `${prop.value}`
    wasValueChanged = true
  }
)
</script>

<template>
  <input
    v-model="input"
    class="unstyled-input w-full h-full text-base"
    type="number"
    :placeholder="`${placeholder}`"
    :step="steps"
    :min="min"
    :max="max"
    :disabled="readonly"
  />
</template>

<style>
/* stylelint-disable selector-no-vendor-prefix */
/* stylelint-disable property-no-vendor-prefix */

/* remove default style input */
.unstyled-input {
  /* Some styles */
}

/* remove default style input */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.text-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
}
</style>

when doing yarn build throws error

ℹ Building components                                                                                                                                                                                                        21:42:02
Error building /Users/mymac/magic/app/packages/components: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:1829:30)
    at Module.error (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:12406:16)
    at Module.tryParse (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:12783:25)
    at Module.setSource (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:12688:24)
    at ModuleLoader.addModuleSource (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:22144:20) 
{
  code: 'PARSE_ERROR',
  parserError: SyntaxError: Unexpected token (1:0)
      at Parser.pp$4.raise (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:19573:13)
      at Parser.pp$9.unexpected (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:16867:8)
      at Parser.pp$5.parseExprAtom (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18948:10)
      at Parser.pp$5.parseExprSubscripts (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18740:19)
      at Parser.pp$5.parseMaybeUnary (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18706:17)
      at Parser.pp$5.parseExprOps (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18633:19)
      at Parser.pp$5.parseMaybeConditional (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18616:19)
      at Parser.pp$5.parseMaybeAssign (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18583:19)
      at Parser.pp$5.parseExpression (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:18546:19)
      at Parser.pp$8.parseStatement (file:///Users/mymac/magic/app/node_modules/rollup/dist/es/shared/rollup.js:17057:45) {
    pos: 0,
    loc: Position { line: 1, column: 0 },
    raisedAt: 1
  },
  id: '/Users/mymac/magic/app/packages/components/src/components/InputAmount.vue',
  pos: 0,
  loc: {
    column: 0,
    file: '/Users/mymac/magic/app/packages/components/src/components/InputAmount.vue',
    line: 1
  },
  frame: '1: <script setup lang="ts">\n' +
    '   ^\n' +
    "2: import { watchDebounced, useMagicKeys } from '@vueuse/core'\n" +
    "3: import { computed, ref, watch } from 'vue'",
  watchFiles: [
    '/Users/mymac/magic/app/packages/components/src/index.ts',
    '/Users/mymac/magic/app/packages/components/src/components/InputAmount.vue'
  ]
}

[dwightjack]

I am getting similar errror when I tried unbuild in react.js library, but it complains about .png or .svg formats, I guess I need some sort of rollup plugin for images maybe like @rollup/plugin-image, but I am not sure how to configure in unbuild

@Digital-Coder you should be able to access the plugins array configuration using the rollup:options hook:

// build.config.ts
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  // other configs
  hooks: {
    'rollup:options'(_ctx, options) {
      options.plugins.push(
       // rollup plugin... 
      )
    },
  },
})

[who-jonson]

If someone still stuck with this & stubborn enougn for using this cool tool anyhow…

Just Keep <template> block at top in your vue SFC file && it’ll fix this isssue. Easy huh…!!

<!--  src/components/InputAmount.vue  -->

<template>
    ........
</template>

<script setup lang="ts">
  // 
</script>

Easy, HuH…!