feat: fixes and a few more examples

README.md

@@ -12,7 +12,8 @@ A part of its design is that this config may implicitly depend on
 other parts of `create-vue` setups, such as `eslint-plugin-vue` being
 extended in the same resulting config.
 
-> Note: the current version doesn't support the legacy `.eslintrc*` configuraion format. For that you need to use version 9 or earlier. See the [corresponding README](https://www.npmjs.com/package/@vue/eslint-config-typescript/v/legacy-eslintrc) for more usage instructions.
+> [!NOTE]
+> The current version doesn't support the legacy `.eslintrc*` configuraion format. For that you need to use version 9 or earlier. See the [corresponding README](https://www.npmjs.com/package/@vue/eslint-config-typescript/v/legacy-eslintrc) for more usage instructions.
 
 ## Installation
 
@@ -36,7 +37,7 @@ import vueTsEslintConfig from "@vue/eslint-config-typescript";
 export default [
  ...pluginVue.configs["flat/essential"],
  ...vueTsEslintConfig(),
-}]
+]
 ```
 
 The above configuration enables [the essential rules for Vue 3](https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention) and [the recommended rules for TypeScript](https://typescript-eslint.io/rules/?=recommended).
@@ -54,14 +55,15 @@ export default [
  ...pluginVue.configs["flat/essential"],
 
  ...vueTsEslintConfig({
- // Supports all the recommended configurations in https://typescript-eslint.io/users/configs#recommended-configurations
+ // Optional: extend additional configurations from `typescript-eslint`.
+ // Supports all the configurations in https://typescript-eslint.io/users/configs#recommended-configurations
  extends: [
  // By default, only the recommended rules are enabled.
  "recommended",
  // You can also manually enable the stylistic rules.
  // "stylistic",
 
- // The ones with `-type-checked` are not yet tested.
+ // [!NOTE] The ones with `-type-checked` are not yet tested.
 
  // Other utility configurations, such as `eslint-recommended`,
  // are also extendable here. But we don't recommend using them directly.
@@ -72,24 +74,24 @@ export default [
  supportedScriptLangs: {
  ts: true,
 
- // [Discouraged]
+ // [!DISCOURAGED]
  // Set to `true` to allow plain `<script>` or `<script setup>` blocks.
  // This might result-in false positive or negatives in some rules for `.vue` files.
  // Note you also need to configure `allowJs: true` in corresponding `tsconfig.json` files.
  js: false,
 
- // [Strongly discouraged]
+ // [!STRONGLY DISCOURAGED]
  // Set to `true` to allow `<script lang="tsx">` blocks.
  // This would be in conflict with all type-aware rules.
  tsx: false,
 
- // [Strongly discouraged]
+ // [!STRONGLY DISCOURAGED]
  // Set to `true` to allow `<script lang="jsx">` blocks.
  // This would be in conflict with all type-aware rules and may result in false positives.
  jsx: false,
  },
 
- // [Not yet implemented]
+ // [!NOT YET IMPLEMENTED]
  // <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
  // Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
  // 

examples/allow-js/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

examples/allow-js/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+ "recommendations": [
+ "Vue.volar",
+ "dbaeumer.vscode-eslint"
+ ]
+}

examples/allow-js/README.md

@@ -0,0 +1,39 @@
+# allow-js
+
+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).
+
+## 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 [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/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

examples/allow-js/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/allow-js/eslint.config.js

@@ -0,0 +1,12 @@
+import pluginVue from "eslint-plugin-vue";
+import vueTsEslintConfig from "@vue/eslint-config-typescript";
+
+export default [
+ ...pluginVue.configs["flat/essential"],
+ ...vueTsEslintConfig({
+ supportedScriptLangs: {
+ ts: true,
+ js: true
+ }
+ }),
+]

examples/allow-js/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <link rel="icon" href="/favicon.ico">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>

examples/allow-js/package.json

@@ -0,0 +1,30 @@
+{
+ "name": "allow-js",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "run-p type-check \"build-only {@}\" --",
+ "preview": "vite preview",
+ "build-only": "vite build",
+ "type-check": "vue-tsc --build --force",
+ "lint": "eslint . --fix"
+ },
+ "dependencies": {
+ "vue": "^3.5.6"
+ },
+ "devDependencies": {
+ "@tsconfig/node20": "^20.1.4",
+ "@types/node": "^20.16.5",
+ "@vitejs/plugin-vue": "^5.1.4",
+ "@vue/eslint-config-typescript": "workspace:*",
+ "@vue/tsconfig": "^0.5.1",
+ "eslint": "^9.10.0",
+ "eslint-plugin-vue": "^9.28.0",
+ "npm-run-all2": "^6.2.3",
+ "typescript": "~5.5.4",
+ "vite": "^5.4.6",
+ "vue-tsc": "^2.1.6"
+ }
+}

examples/allow-js/src/App.vue

@@ -0,0 +1,47 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+ <header>
+ <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+
+ <div class="wrapper">
+ <HelloWorld msg="You did it!" />
+ </div>
+ </header>
+
+ <main>
+ <TheWelcome />
+ </main>
+</template>
+
+<style scoped>
+header {
+ line-height: 1.5;
+}
+
+.logo {
+ display: block;
+ margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+ header {
+ display: flex;
+ place-items: center;
+ padding-right: calc(var(--section-gap) / 2);
+ }
+
+ .logo {
+ margin: 0 2rem 0 0;
+ }
+
+ header .wrapper {
+ display: flex;
+ place-items: flex-start;
+ flex-wrap: wrap;
+ }
+}
+</style>

examples/allow-js/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+: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;
+}

examples/allow-js/src/assets/main.css

@@ -0,0 +1,35 @@
+@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;
+ padding: 3px;
+}
+
+@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;
+ }
+}