Vue2Svelte

0.0.11 verified Fri May 01 auth: no javascript

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.

Common errors

error TypeError: Vue2Svelte is not a constructor ↓

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

fix

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

error Uncaught TypeError: vue2svelte__WEBPACK_IMPORTED_MODULE_0__.default is not a function ↓

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

fix

Use new Vue2Svelte(component) to instantiate.

error Cannot find module 'vue2svelte' ↓

cause Package not installed or module resolution issue.

fix

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

Warnings

breaking Many 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).

gotcha Default 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();`

gotcha The 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.

Install

npm install vue2svelte

yarn add vue2svelte

pnpm add vue2svelte

Imports

Vue2Svelte

wrong

const Vue2Svelte = require('vue2svelte')

correct

import Vue2Svelte from 'vue2svelte'

Package is ESM-only. CommonJS require will error.

Vue2Svelte (type)
wrong
```
import { Vue2Svelte } from 'vue2svelte'
```
correct
```
import type Vue2Svelte from 'vue2svelte'
```
Default export is a class; named import will be undefined.

Compiled result

wrong

Vue2Svelte.compile(component)

correct

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

compile() is an instance method, not static.

Quickstart

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>