{"id":13560873,"url":"https://github.com/vuejs/repl","last_synced_at":"2026-04-13T07:37:39.425Z","repository":{"id":37764666,"uuid":"403767061","full_name":"vuejs/repl","owner":"vuejs","description":"Vue SFC REPL as a Vue 3 component","archived":false,"fork":false,"pushed_at":"2025-05-13T17:28:44.000Z","size":1849,"stargazers_count":1006,"open_issues_count":37,"forks_count":199,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-13T18:39:03.420Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://repl-vuejs.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-06T21:53:03.000Z","updated_at":"2025-05-13T07:30:47.000Z","dependencies_parsed_at":"2024-01-31T03:30:40.625Z","dependency_job_id":"410eeade-64d0-4a6d-8323-ad97dd1bdb8c","html_url":"https://github.com/vuejs/repl","commit_stats":{"total_commits":491,"total_committers":44,"mean_commits":"11.159090909090908","dds":0.6619144602851323,"last_synced_commit":"d4845137bd70fae56b0d9273b7218e4404a853fc"},"previous_names":[],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Frepl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Frepl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Frepl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Frepl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuejs","download_url":"https://codeload.github.com/vuejs/repl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010842,"owners_count":21998997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:00:50.352Z","updated_at":"2026-04-13T07:37:39.406Z","avatar_url":"https://github.com/vuejs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# @vue/repl\n\nVue SFC REPL as a Vue 3 component.\n\n## Basic Usage\n\n**Note: `@vue/repl` \u003e= 2 now supports Monaco Editor, but also requires explicitly passing in the editor to be used for tree-shaking.**\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nexport default defineConfig({\n  optimizeDeps: {\n    exclude: ['@vue/repl'],\n  },\n  // ...\n})\n```\n\n### With CodeMirror Editor\n\nBasic editing experience with no intellisense. Lighter weight, fewer network requests, better for embedding use cases.\n\n```vue\n\u003cscript setup\u003e\nimport { Repl } from '@vue/repl'\nimport CodeMirror from '@vue/repl/codemirror-editor'\n// import '@vue/repl/style.css'\n// ^ no longer needed after 3.0\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cRepl :editor=\"CodeMirror\" /\u003e\n\u003c/template\u003e\n```\n\n### With Monaco Editor\n\nWith Volar support, autocomplete, type inference, and semantic highlighting. Heavier bundle, loads dts files from CDN, better for standalone use cases.\n\n```vue\n\u003cscript setup\u003e\nimport { Repl } from '@vue/repl'\nimport Monaco from '@vue/repl/monaco-editor'\n// import '@vue/repl/style.css'\n// ^ no longer needed after 3.0\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cRepl :editor=\"Monaco\" /\u003e\n\u003c/template\u003e\n```\n\n## Advanced Usage\n\nCustomize the behavior of the REPL by manually initializing the store.\n\nSee [v4 Migration Guide](https://github.com/vuejs/repl/releases/tag/v4.0.0)\n\n```vue\n\u003cscript setup\u003e\nimport { watchEffect, ref } from 'vue'\nimport { Repl, useStore, useVueImportMap } from '@vue/repl'\nimport Monaco from '@vue/repl/monaco-editor'\n\n// retrieve some configuration options from the URL\nconst query = new URLSearchParams(location.search)\n\nconst {\n  importMap: builtinImportMap,\n  vueVersion,\n  productionMode,\n} = useVueImportMap({\n  // specify the default URL to import Vue runtime from in the sandbox\n  // default is the CDN link from jsdelivr.com with version matching Vue's version\n  // from peerDependency\n  runtimeDev: 'cdn link to vue.runtime.esm-browser.js',\n  runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',\n  serverRenderer: 'cdn link to server-renderer.esm-browser.js',\n})\n\nconst store = useStore(\n  {\n    // pre-set import map\n    builtinImportMap,\n    vueVersion,\n    // starts on the output pane (mobile only) if the URL has a showOutput query\n    showOutput: ref(query.has('showOutput')),\n    // starts on a different tab on the output pane if the URL has a outputMode query\n    // and default to the \"preview\" tab\n    outputMode: ref(query.get('outputMode') || 'preview'),\n  },\n  // initialize repl with previously serialized state\n  location.hash,\n)\n\n// persist state to URL hash\nwatchEffect(() =\u003e history.replaceState({}, '', store.serialize()))\n\n// use a specific version of Vue\nvueVersion.value = '3.2.8'\n// production mode is enabled\nproductionMode.value = true\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cRepl :store=\"store\" :editor=\"Monaco\" :showCompileOutput=\"true\" /\u003e\n\u003c/template\u003e\n```\n\nUse only the Preview without the editor\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport { Sandbox, useStore } from '@vue/repl'\n\n// retrieve some configuration options from the URL\nconst query = new URLSearchParams(location.search)\n\nconst store = useStore(\n  {\n    // custom vue version\n    vueVersion: ref(query.get('vue')),\n  },\n  // initialize repl with previously serialized state\n  location.hash,\n)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSandbox :store=\"store\" /\u003e\n\u003c/template\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eConfiguration options for resource links. (replace CDN resources)\u003c/summary\u003e\n\n```ts\nexport type ResourceLinkConfigs = {\n  /** URL for ES Module Shims. */\n  esModuleShims?: string\n  /** Function that generates the Vue compiler URL based on the version. */\n  vueCompilerUrl?: (version: string) =\u003e string\n  /** Function that generates the TypeScript library URL based on the version. */\n  typescriptLib?: (version: string) =\u003e string\n\n  /** [monaco] Function that generates a URL to fetch the latest version of a package. */\n  pkgLatestVersionUrl?: (pkgName: string) =\u003e string\n  /** [monaco] Function that generates a URL to browse a package directory. */\n  pkgDirUrl?: (pkgName: string, pkgVersion: string, pkgPath: string) =\u003e string\n  /** [monaco] Function that generates a URL to fetch the content of a file from a package. */\n  pkgFileTextUrl?: (\n    pkgName: string,\n    pkgVersion: string | undefined,\n    pkgPath: string,\n  ) =\u003e string\n}\n```\n\n**unpkg**\n\n```ts\nconst store = useStore({\n  resourceLinks: ref({\n    esModuleShims:\n      'https://unpkg.com/es-module-shims@1.5.18/dist/es-module-shims.wasm.js',\n    vueCompilerUrl: (version) =\u003e\n      `https://unpkg.com/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`,\n    typescriptLib: (version) =\u003e\n      `https://unpkg.com/typescript@${version}/lib/typescript.js`,\n    pkgLatestVersionUrl: (pkgName) =\u003e\n      `https://unpkg.com/${pkgName}@latest/package.json`,\n    pkgDirUrl: (pkgName, pkgVersion, pkgPath) =\u003e\n      `https://unpkg.com/${pkgName}@${pkgVersion}/${pkgPath}/?meta`,\n    pkgFileTextUrl: (pkgName, pkgVersion, pkgPath) =\u003e\n      `https://unpkg.com/${pkgName}@${pkgVersion || 'latest'}/${pkgPath}`,\n  }),\n})\n```\n\n**npmmirror**\n\n```ts\nconst store = useStore({\n  resourceLinks: ref({\n    esModuleShims:\n      'https://registry.npmmirror.com/es-module-shims/1.5.18/files/dist/es-module-shims.wasm.js',\n    vueCompilerUrl: (version) =\u003e\n      `https://registry.npmmirror.com/@vue/compiler-sfc/${version}/files/dist/compiler-sfc.esm-browser.js`,\n    typescriptLib: (version) =\u003e\n      `https://registry.npmmirror.com/typescript/${version}/files/lib/typescript.js`,\n\n    pkgLatestVersionUrl: (pkgName) =\u003e\n      `https://registry.npmmirror.com/${pkgName}/latest/files/package.json`,\n    pkgDirUrl: (pkgName, pkgVersion, pkgPath) =\u003e\n      `https://registry.npmmirror.com/${pkgName}/${pkgVersion}/files/${pkgPath}/?meta`,\n    pkgFileTextUrl: (pkgName, pkgVersion, pkgPath) =\u003e\n      `https://registry.npmmirror.com/${pkgName}/${pkgVersion || 'latest'}/files/${pkgPath}`,\n  }),\n})\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuejs%2Frepl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuejs%2Frepl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuejs%2Frepl/lists"}