{"id":15980584,"url":"https://github.com/drwpow/pika-web-vue","last_synced_at":"2026-02-11T21:04:40.390Z","repository":{"id":48283946,"uuid":"208687152","full_name":"drwpow/pika-web-vue","owner":"drwpow","description":"@pika/web + TypeScript + Vue","archived":false,"fork":false,"pushed_at":"2021-08-03T20:01:18.000Z","size":1575,"stargazers_count":0,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-10T01:00:53.216Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pika-web-vue.powers.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drwpow.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-16T01:49:32.000Z","updated_at":"2021-05-01T15:30:49.000Z","dependencies_parsed_at":"2022-09-16T18:10:50.088Z","dependency_job_id":null,"html_url":"https://github.com/drwpow/pika-web-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/drwpow/pika-web-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fpika-web-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fpika-web-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fpika-web-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fpika-web-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drwpow","download_url":"https://codeload.github.com/drwpow/pika-web-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fpika-web-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29345430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T20:11:40.865Z","status":"ssl_error","status_checked_at":"2026-02-11T20:10:41.637Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-10-08T00:20:59.451Z","updated_at":"2026-02-11T21:04:40.362Z","avatar_url":"https://github.com/drwpow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://pika-web-vue.powers.now.sh\"\u003e\u003cimg alt=\"View Demo\" src=\"https://img.shields.io/badge/%E2%96%B3-View%20Demo-black\"/\u003e\u003c/a\u003e\n\n![Michael Scott’s Dunder Mifflin\n        Scranton Meredith Palmer Memorial Celebrity Rabies Awareness Pro-Am Fun\n        Run Race For The Cure](./src/static/michaelscottsdundermifflinscrantonmeredithpalmermemorialcelebrityrabiesawarenessproamfunrunraceforthecure.gif)\n\n# @pika/web + TypeScript + Vue Example\n\nExample using TypeScript, Vue, and [@pika/web][@pika/web], a new ESM bundler.\nUses Sass for styling.\n\n## Other Languages\n\n- [Preact][pika-web-preact]\n\n## Example\n\n```bash\nnpm i\nnpm start\n```\n\nIt’ll run a multi-page app at `localhost:5000`.\n\n## Vue-specific setup\n\nBecause we’re running Vue as an ESM package, there are a few key things we’ll have to do:\n\n1. We can’t use the default `vue` package; we’ll have to use the browser ESM\n   version (`/dist/vue.esm.browser.js`)\n1. TypeScript doesn’t know what the types are for the browser ESM version, so\n   we’ll have to trick TypeScript into using `vue` but swapping it out after\n   TypeScript runs.\n1. TypeScript’s JSX conversion doesn’t work for Vue, so we need\n   `@vue/babel-preset-app` to convert it for us.\n\nLet’s step through these one-by-one.\n\n#### Using an alternate library build\n\nTypeScript demands we use the following:\n\n```ts\nimport Vue from \"/web_modules/vue.js\";\n```\n\nHowever we need `/web_modules/vue/dist/vue.esm.browser.js` for our ES Modules\napp. Fortunately `babel-plugin-transform-rename-import` was made exactly for\nthis kind of situation. We’ll install that and modify `.babelrc`:\n\n```json\n{\n  \"plugins\": [\n    [\n      \"transform-rename-import\",\n      {\n        \"replacements\": [\n          {\n            \"original\": \"/web_modules/vue.js\",\n            \"replacement\": \"/web_modules/vue/dist/vue.esm.browser.js\"\n          }\n        ]\n      }\n    ]\n  ]\n}\n```\n\nAnd we’ll tell @pika/web to load that one instead in `package.json`:\n\n```json\n  \"@pika/web\": {\n    \"webDependencies\": [\n      \"vue/dist/vue.esm.browser.js\",\n    ]\n  },\n```\n\nWe’ll set up Babel to run in the next step.\n\n#### Compiling Vue JSX\n\nTypeScript’s JSX conversion doesn’t work well with Vue’s compiler.\nFortunately Vue ships a `@vue/babel-preset-app` Babel preset that will take\ncare of everything. To use that we need to configure TypeScript to understand\nJSX without transforming it. That’s what the `{ \"jsx\": \"preserve\" }` option\nis for in `tsconfig.json`:\n\n```json\n\"compilerOptions\": {\n  \"jsx\": \"preserve\",\n}\n```\n\nNow if we run `tsc`, we end up with a whole bunch of `.jsx` files in our\ndirectory:\n\n```\npublic\n├── components\n│   ├── Home.jsx\n│   └── Meredith.jsx\n└── index.jsx\n```\n\nThat’s actually a blessing in disguise that the browser can’t read those.\nNext, we install `@vue/babel-preset-app` and add it to `.babelrc`:\n\n```diff\n {\n+  \"presets\": [\"@vue/babel-preset-app\"],\n   \"plugins\": [\n     [\n       \"transform-rename-import\",\n       {\n         \"replacements\": [\n           {\n             \"original\": \"/web_modules/vue.js\",\n             \"replacement\": \"/web_modules/vue/dist/vue.esm.browser.js\"\n           }\n         ]\n       }\n     ]\n   ]\n }\n```\n\nLet’s target our new `.jsx` files and nothing else. In `package.json`:\n\n```json\n\"scripts\": {\n  \"build:js\": \"babel public --out-dir public -x .jsx\",\n  \"build:js:watch\": \"babel --watch public --out-dir public -x .jsx\"\n}\n```\n\nThis will allow us to run `npm run build:js` to convert all `.jsx` files to\n`.js`:\n\n```\npublic\n├── components\n│   ├── Home.js\n│   ├── Home.jsx\n│   ├── Meredith.js\n│   └── Meredith.jsx\n├── index.js\n└── index.jsx\n```\n\nWe can even `--watch` those `.jsx` files with Babel and we won’t enter an\nendless loop! Because in this setup, TypeScript will only convert `.tsx` ➡️\n`.jsx` and Babel will only convert `.jsx` ➡️ `.js` so there’s no overlap (nor\nwill either compiler recompile their own files over and over again).\n\n### Why not just only use Babel?\n\nYou can use TypeScript’s Babel plugin in situations like this, and it will\nsave a step. However, you don’t get TypeScript’s full typechecking features\nif you use Babel. And personally, that’s not worth it for me. A few extra\nsteps are always worth type safety.\n\n[@pika/web]: https://github.com/pikapkg/web\n[pika-web-preact]: https://dangodev/pika-web-preact\n[vue-jsx]: https://vuejs.org/v2/guide/render-function.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrwpow%2Fpika-web-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrwpow%2Fpika-web-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrwpow%2Fpika-web-vue/lists"}