vue2svelte

library0.0.11jsnpmunverified

A transpiler that converts Vue Single File Components (SFCs) into Svelte components. Current version 0.0.11 is in early development with sporadic releases. Supports simple HTML, props, data, v-if/v-else/v-for directives, and v-bind. Does not yet support methods, computed properties, lifecycle hooks, v-model, or mixins. Differentiates as a direct Vue-to-Svelte migration tool, but maturity is low. TypeScript type definitions are included.

web-framework

npm install vue2svelte

github ↗package ↗

INSTALL

IMPORT

SIG · VUE2SVELTE

vue2svelte

web-frameworkjavascriptv0.0.11

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vue2Svelte

✓ import Vue2Svelte from 'vue2svelte'

✗ const Vue2Svelte = require('vue2svelte')

Package is ESM-only. CommonJS require will error.

Vue2Svelte (type)

✓ import type Vue2Svelte from 'vue2svelte'

✗ import { Vue2Svelte } from 'vue2svelte'

Default export is a class; named import will be undefined.

Compiled result

✓ const result = new Vue2Svelte(component).compile()

✗ Vue2Svelte.compile(component)

compile() is an instance method, not static.

Shows basic usage: instantiate Vue2Svelte with a Vue options object, then call compile() to get a Svelte string.

import Vue2Svelte from 'vue2svelte'; const vueComponent = { template: `<div><span v-for="item in list">{{ item }}</span></div>`, props: { list: { default: ['item 1', 'item 2'] } }, data () { return { hello: 'world' } } }; const svelteComponent = new Vue2Svelte(vueComponent); console.log(svelteComponent.compile()); // Output: <script>export let list=["item 1","item 2"];let hello="world";</script><div>{#each list as item}<span>{item}</span>{/each}</div>

Debug

Known issues

breakingMany Vue features (methods, computed, lifecycle hooks, v-model, mixins) are not supported. Compilation may produce incomplete or non-functional Svelte code.

fix

Only use with simple components that rely solely on template, props, data, and limited directives (v-if, v-for, v-bind).

affects: <=0.0.11

gotchaDefault import is a class; must be instantiated with `new Vue2Svelte(...)`. Do not attempt to call it as a function.

fix

Correct usage: `const compiler = new Vue2Svelte(options); compiler.compile();`

affects: >=0.0.1

gotchaThe output is a raw string, not a Svelte component instance. You must write it to a .svelte file or use Svelte's runtime to compile it further.

fix

Save the string as a .svelte file and import it with Svelte's bundler plugin.

affects: >=0.0.1

Errors

Common errors & fixes

TypeError: Vue2Svelte is not a constructor

Using require() or incorrect import (named instead of default).

fix

Use `import Vue2Svelte from 'vue2svelte'` (ESM default import).

Uncaught TypeError: vue2svelte__WEBPACK_IMPORTED_MODULE_0__.default is not a function

Attempting to call Vue2Svelte() as a function without `new`.

fix

Use `new Vue2Svelte(component)` to instantiate.

Cannot find module 'vue2svelte'

Package not installed or module resolution issue.

fix

Run `npm install vue2svelte` or check your bundler configuration for ES modules.

Upgrade

Version history

0.0.11latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/trickstival/vue2svelte ↗

packagehttps://www.npmjs.com/package/vue2svelte ↗