├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── deno.json ├── index.html ├── public ├── brand-github.svg ├── vite-deno.svg └── vite.svg ├── src ├── App.vue ├── assets │ └── vue.svg ├── components │ └── HelloWorld.vue ├── main.js └── style.css └── vite.config.mjs /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: push 4 | 5 | jobs: 6 | deploy: 7 | runs-on: ubuntu-latest 8 | 9 | permissions: 10 | id-token: write 11 | contents: read 12 | 13 | steps: 14 | - name: Clone repository 15 | uses: actions/checkout@v3 16 | 17 | - name: Cache .deno/ 18 | id: cache-deno 19 | uses: actions/cache@v3 20 | with: 21 | path: .deno/ 22 | key: ${{ runner.os }}-deno 23 | 24 | - name: Cache node_modules/ 25 | id: cache-node-modules 26 | uses: actions/cache@v3 27 | with: 28 | path: node_modules/ 29 | key: ${{ runner.os }}-node-modules 30 | 31 | - name: Install Deno 32 | uses: denoland/setup-deno@v1 33 | with: 34 | deno-version: v1.x 35 | 36 | - name: Build production 37 | env: 38 | DENO_DIR: .deno 39 | run: deno task build 40 | 41 | - name: Deploy to Deno Deploy 42 | uses: denoland/deployctl@v1 43 | with: 44 | project: vite-deno-example 45 | root: dist 46 | entrypoint: https://deno.land/std@0.157.0/http/file_server.ts -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .vite -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite + Deno 2 | 3 | 4 | 5 | This is an example repo of running Vite with Deno. 6 | 7 | You can see live site at: https://vite-deno-example.deno.dev 8 | 9 | This repo is based on a `deno-vue` template from `create-vite-extra`: 10 | 11 | ``` 12 | $ deno run -A npm:create-vite-extra --template deno-vue 13 | ``` 14 | 15 | ## Notes 16 | 17 | - You need to use `.mjs` or `.mts` extension for the `vite.config.[ext]` file. 18 | 19 | ## Papercuts 20 | 21 | Currently there's a "papercut" for Deno users: 22 | 23 | - peer dependencies need to be referenced in `vite.config.js` - in this example 24 | it is only `vue` package that needs to be referenced 25 | 26 | ## Running 27 | 28 | You need to have Deno v1.28 or later intalled to run this repo. 29 | 30 | Start a dev server: 31 | 32 | ``` 33 | $ deno task dev 34 | ``` 35 | 36 | ## Deploy 37 | 38 | Build production assets: 39 | 40 | ``` 41 | $ deno task build 42 | ``` 43 | 44 | This repository uses 45 | [Deno Deploy and Git integration](https://deno.com/deploy/docs/projects#git-integration), 46 | where deployment is happening as part of the CI pipeline. 47 | -------------------------------------------------------------------------------- /deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --unstable --node-modules-dir npm:vite", 4 | "build": "deno run -A --unstable --node-modules-dir npm:vite build", 5 | "preview": "deno run -A --unstable --node-modules-dir npm:vite preview", 6 | "serve": "deno run --allow-net --allow-read main.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + Deno 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/brand-github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/vite-deno.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 27 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 36 | 37 | 49 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import "./style.css"; 3 | import App from "./App.vue"; 4 | 5 | createApp(App).mount("#app"); 6 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | a { 28 | font-weight: 500; 29 | color: #646cff; 30 | text-decoration: inherit; 31 | } 32 | a:hover { 33 | color: #535bf2; 34 | } 35 | 36 | body { 37 | margin: 0; 38 | display: flex; 39 | place-items: center; 40 | min-width: 320px; 41 | min-height: 100vh; 42 | } 43 | 44 | h1 { 45 | font-size: 3.2em; 46 | line-height: 1.1; 47 | } 48 | 49 | button { 50 | border-radius: 8px; 51 | border: 1px solid transparent; 52 | padding: 0.6em 1.2em; 53 | font-size: 1em; 54 | font-weight: 500; 55 | font-family: inherit; 56 | background-color: #1a1a1a; 57 | cursor: pointer; 58 | transition: border-color 0.25s; 59 | } 60 | button:hover { 61 | border-color: #646cff; 62 | } 63 | button:focus, 64 | button:focus-visible { 65 | outline: 4px auto -webkit-focus-ring-color; 66 | } 67 | 68 | .card { 69 | padding: 2em; 70 | } 71 | 72 | #app { 73 | max-width: 1280px; 74 | margin: 0 auto; 75 | padding: 2rem; 76 | text-align: center; 77 | } 78 | 79 | @media (prefers-color-scheme: light) { 80 | :root { 81 | color: #213547; 82 | background-color: #ffffff; 83 | } 84 | a:hover { 85 | color: #747bff; 86 | } 87 | button { 88 | background-color: #f9f9f9; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /vite.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "npm:vite"; 2 | import vue from "npm:@vitejs/plugin-vue"; 3 | 4 | // NOTE(bartlomieju): this is a papercut that shouldn't be required, see README.md 5 | import "npm:vue"; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [vue()], 10 | }); 11 | --------------------------------------------------------------------------------