diff --git a/apps/vue-vite-app/.editorconfig b/apps/vue-vite-app/.editorconfig
new file mode 100644
index 0000000000..d9f65b773c
--- /dev/null
+++ b/apps/vue-vite-app/.editorconfig
@@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 120
diff --git a/apps/vue-vite-app/.eslintrc.cjs b/apps/vue-vite-app/.eslintrc.cjs
deleted file mode 100644
index 6f40582dda..0000000000
--- a/apps/vue-vite-app/.eslintrc.cjs
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
- root: true,
- 'extends': [
- 'plugin:vue/vue3-essential',
- 'eslint:recommended',
- '@vue/eslint-config-typescript',
- '@vue/eslint-config-prettier/skip-formatting'
- ],
- parserOptions: {
- ecmaVersion: 'latest'
- }
-}
diff --git a/apps/vue-vite-app/.gitattributes b/apps/vue-vite-app/.gitattributes
new file mode 100644
index 0000000000..6313b56c57
--- /dev/null
+++ b/apps/vue-vite-app/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/apps/vue-vite-app/.gitignore b/apps/vue-vite-app/.gitignore
index 38adffa64e..8ee54e8d34 100644
--- a/apps/vue-vite-app/.gitignore
+++ b/apps/vue-vite-app/.gitignore
@@ -26,3 +26,5 @@ coverage
*.njsproj
*.sln
*.sw?
+
+*.tsbuildinfo
diff --git a/apps/vue-vite-app/.prettierrc.json b/apps/vue-vite-app/.prettierrc.json
index 66e23359c3..4c2c293af8 100644
--- a/apps/vue-vite-app/.prettierrc.json
+++ b/apps/vue-vite-app/.prettierrc.json
@@ -1,8 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
- "semi": false,
- "tabWidth": 2,
+ "semi": true,
"singleQuote": true,
- "printWidth": 100,
+ "printWidth": 120,
"trailingComma": "none"
-}
\ No newline at end of file
+}
diff --git a/apps/vue-vite-app/.vscode/extensions.json b/apps/vue-vite-app/.vscode/extensions.json
index c0a6e5a481..c92168f50e 100644
--- a/apps/vue-vite-app/.vscode/extensions.json
+++ b/apps/vue-vite-app/.vscode/extensions.json
@@ -1,3 +1,8 @@
{
- "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+ "recommendations": [
+ "Vue.volar",
+ "dbaeumer.vscode-eslint",
+ "EditorConfig.EditorConfig",
+ "esbenp.prettier-vscode"
+ ]
}
diff --git a/apps/vue-vite-app/README.md b/apps/vue-vite-app/README.md
index 027eb5dbff..a1d076c8cc 100644
--- a/apps/vue-vite-app/README.md
+++ b/apps/vue-vite-app/README.md
@@ -4,22 +4,15 @@ This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
- 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
- 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
diff --git a/apps/vue-vite-app/eslint.config.ts b/apps/vue-vite-app/eslint.config.ts
new file mode 100644
index 0000000000..d3d8f17944
--- /dev/null
+++ b/apps/vue-vite-app/eslint.config.ts
@@ -0,0 +1,24 @@
+import pluginVue from 'eslint-plugin-vue'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+ {
+ name: 'app/files-to-lint',
+ files: ['**/*.{ts,mts,tsx,vue}'],
+ },
+
+ {
+ name: 'app/files-to-ignore',
+ ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+ },
+
+ pluginVue.configs['flat/essential'],
+ vueTsConfigs.recommended,
+ skipFormatting,
+)
diff --git a/apps/vue-vite-app/package.json b/apps/vue-vite-app/package.json
index 9252413db7..f5eea1b4e2 100644
--- a/apps/vue-vite-app/package.json
+++ b/apps/vue-vite-app/package.json
@@ -2,35 +2,36 @@
"name": "vue-vite-app",
"version": "0.0.0",
"private": true,
+ "type": "module",
"scripts": {
"dev": "vite",
- "build": "run-p type-check build-only",
+ "build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
- "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
- "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+ "type-check": "vue-tsc --build",
+ "lint": "eslint . --fix",
"format": "prettier --write src/"
},
"dependencies": {
- "@ffmpeg/ffmpeg": "*",
- "@ffmpeg/util": "*",
- "vue": "^3.4.18"
+ "@ffmpeg/ffmpeg": "^0.12.15",
+ "@ffmpeg/util": "^0.12.2",
+ "vue": "^3.5.13"
},
"devDependencies": {
- "@rushstack/eslint-patch": "^1.7.2",
- "@tsconfig/node18": "^18.2.2",
- "@types/node": "^20.11.17",
- "@vitejs/plugin-vue": "^5.0.4",
- "@vitejs/plugin-vue-jsx": "^3.1.0",
- "@vue/eslint-config-prettier": "^9.0.0",
- "@vue/eslint-config-typescript": "^12.0.0",
- "@vue/tsconfig": "^0.5.1",
- "eslint": "^8.56.0",
- "eslint-plugin-vue": "^9.21.1",
- "npm-run-all": "^4.1.5",
- "prettier": "^3.2.5",
- "typescript": "~5.3.3",
- "vite": "^4.5.2",
- "vue-tsc": "^1.8.27"
+ "@tsconfig/node22": "^22.0.0",
+ "@types/node": "^22.13.4",
+ "@vitejs/plugin-vue": "^5.2.1",
+ "@vue/eslint-config-prettier": "^10.2.0",
+ "@vue/eslint-config-typescript": "^14.4.0",
+ "@vue/tsconfig": "^0.7.0",
+ "eslint": "^9.20.1",
+ "eslint-plugin-vue": "^9.32.0",
+ "jiti": "^2.4.2",
+ "npm-run-all2": "^7.0.2",
+ "prettier": "^3.5.1",
+ "typescript": "~5.7.3",
+ "vite": "^6.1.0",
+ "vite-plugin-vue-devtools": "^7.7.2",
+ "vue-tsc": "^2.2.2"
}
}
diff --git a/apps/vue-vite-app/src/App.vue b/apps/vue-vite-app/src/App.vue
index 2e7c878b1f..3455b1c3a6 100644
--- a/apps/vue-vite-app/src/App.vue
+++ b/apps/vue-vite-app/src/App.vue
@@ -1,9 +1,29 @@
-
+
+
+
+
+ Loading FFmpeg…
+
+
+
+
diff --git a/apps/vue-vite-app/src/assets/base.css b/apps/vue-vite-app/src/assets/base.css
deleted file mode 100644
index 8816868a41..0000000000
--- a/apps/vue-vite-app/src/assets/base.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* color palette from */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- font-weight: normal;
-}
-
-body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
- line-height: 1.6;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
diff --git a/apps/vue-vite-app/src/assets/main.css b/apps/vue-vite-app/src/assets/main.css
deleted file mode 100644
index e8667cd450..0000000000
--- a/apps/vue-vite-app/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
-
- font-weight: normal;
-}
-
-a,
-.green {
- text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
- transition: 0.4s;
-}
-
-@media (hover: hover) {
- a:hover {
- background-color: hsla(160, 100%, 37%, 0.2);
- }
-}
-
-@media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
-
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
-}
diff --git a/apps/vue-vite-app/src/components/FFmpegDemo.vue b/apps/vue-vite-app/src/components/FFmpegDemo.vue
index 56cf22f29d..8f1741b9a4 100644
--- a/apps/vue-vite-app/src/components/FFmpegDemo.vue
+++ b/apps/vue-vite-app/src/components/FFmpegDemo.vue
@@ -1,61 +1,51 @@
-
-
-
-
- {{ message }}
-
+
-
diff --git a/apps/vue-vite-app/src/main.ts b/apps/vue-vite-app/src/main.ts
index 0ac3a5ff0c..654a2640d0 100644
--- a/apps/vue-vite-app/src/main.ts
+++ b/apps/vue-vite-app/src/main.ts
@@ -1,6 +1,5 @@
-import './assets/main.css'
+import '@/styles/index.css';
+import { createApp } from 'vue';
+import App from '@/App.vue';
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/apps/vue-vite-app/src/styles/index.css b/apps/vue-vite-app/src/styles/index.css
new file mode 100644
index 0000000000..6d76cf3c95
--- /dev/null
+++ b/apps/vue-vite-app/src/styles/index.css
@@ -0,0 +1,30 @@
+@import 'reset.css';
+
+body {
+ color: #e3e3e3;
+ background-color: #1b1b1d;
+ font-family: Arial, sans-serif;
+}
+
+button {
+ padding: 0.5em 1em;
+ color: inherit;
+ background-color: #272727;
+ border: none;
+ border-radius: 100vmax;
+ text-decoration: none;
+ cursor: pointer;
+ user-select: none;
+
+ &:hover {
+ background-color: #3d3d3d;
+ }
+
+ &:active {
+ background-color: #505050;
+ }
+}
+
+video {
+ border-radius: 12px;
+}
diff --git a/apps/vue-vite-app/src/styles/reset.css b/apps/vue-vite-app/src/styles/reset.css
new file mode 100644
index 0000000000..f2ce236fd0
--- /dev/null
+++ b/apps/vue-vite-app/src/styles/reset.css
@@ -0,0 +1,62 @@
+/*
+ Josh's Custom CSS Reset
+ https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+}
+
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+#app {
+ isolation: isolate;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+p {
+ text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-wrap: balance;
+}
diff --git a/apps/vue-vite-app/tsconfig.app.json b/apps/vue-vite-app/tsconfig.app.json
index 59a15f2845..913b8f279f 100644
--- a/apps/vue-vite-app/tsconfig.app.json
+++ b/apps/vue-vite-app/tsconfig.app.json
@@ -3,12 +3,10 @@
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
- "composite": true,
- "baseUrl": ".",
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
"paths": {
"@/*": ["./src/*"]
- },
- "target": "esnext",
- "moduleResolution": "node"
+ }
}
}
diff --git a/apps/vue-vite-app/tsconfig.node.json b/apps/vue-vite-app/tsconfig.node.json
index dee96bed47..a83dfc9d48 100644
--- a/apps/vue-vite-app/tsconfig.node.json
+++ b/apps/vue-vite-app/tsconfig.node.json
@@ -1,14 +1,17 @@
{
- "extends": "@tsconfig/node18/tsconfig.json",
+ "extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
- "playwright.config.*"
+ "playwright.config.*",
+ "eslint.config.*"
],
"compilerOptions": {
- "composite": true,
+ "noEmit": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
diff --git a/apps/vue-vite-app/vite.config.ts b/apps/vue-vite-app/vite.config.ts
index 20fba69711..08cdab5e35 100644
--- a/apps/vue-vite-app/vite.config.ts
+++ b/apps/vue-vite-app/vite.config.ts
@@ -1,17 +1,19 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
-// https://vitejs.dev/config/
+// https://vite.dev/config/
export default defineConfig({
- plugins: [vue(), vueJsx()],
+ plugins: [vue(), vueDevTools()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
+
+ // Necessary for FFmpeg
optimizeDeps: {
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
},
@@ -21,4 +23,4 @@ export default defineConfig({
'Cross-Origin-Embedder-Policy': 'require-corp'
}
}
-})
+});