Vue3 Development Experiences

Vue3 CLI: not tested

Vue3 VITE Typescript Setup:

• VITE dev server: "vite", hot module reload, fast, but does not type check

• BUILD: "vue-tsc --noEmit && vite build", vue-tsc do typecheck, however -w watch mode not yet developed. Use Volar plugin for type-checking.

• SERVE: "vite preview", serve in production mode, change become available only after BUILD. Not suitable for development.

• vue-tsc, Volar IDE plugin: type check single-page-template

VS Code Plugin:

• Volar - good

VS Code snippet:

• Easy Snippet plugin

  • in <script> add snippet to "typescript" language

  • in <template> add snippet to "html" language

Under VITE can develop with "vite" (start dev server) and "build" (build for production)

When use Typescript:

VITE DEV SERVER

"vite" compiles template, expecting JS syntax. Typescript syntax does not work there. Also does not do type checking.

BUILD

"build" is actually two steps: (1) vue-tsc type check codes, include codes in template expressions (inside {{ }}) (2) vite build - strip Typescript typing without building and build for JS, still expect expressions inside template {{ }} to be JS syntax.

CODE IN TEMPLATE - KEEY THEM SIMPLE

This requires expressions in {{ }} (1) passes type checking and (2) in JS syntax (not allowed such as "as any", "somethingMayBeNull!.property"). So - it's best to keep expressions in template SIMPLE. In <script> section it's much simpler.

AND also:

• if code works under dev server, it may not pass build: type checking may not pass (for example something may be null but actually not null)

• if code type-checks ok (vue-tsc) still may not build or work in dev server: vue-tsc accepts TS in {{ }} but vite build DOES NOT

DEBUG in VS Code

Yes it works. With dev server:

"launch.json" - simple chrome configuration, just set the url

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "pwa-chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:3000",

"webRoot": "${workspaceFolder}"

}

]

}

Breakpoint works, inspection in debug console works

HOWEVER - VS Code debug console accesses __proto__ initiatively (probably prepare auto-complete) and also causes another warning. Best to ignore them in warningHandler. See best practices below.

Watch Error and Warnings

Should always open browser development console and watch any warning. Or better add this to bring warnings and errors to front:

const app = createApp(App);

app.config.errorHandler = (err, vm, info) => {

const message = `ERROR:\n${err}\n\n${info}`;

window.alert(message);

console.error(message);

}

app.config.warnHandler = (message, vm, trace) => {

if (

message.startsWith(`Property "__proto__" was accessed during render but is not defined on instance.`) ||

message.startsWith(`Avoid app logic that relies on enumerating keys on a component instance`)

) {

return; // caused by VS Code debug console

}

const msg = `WARNING:\n${message}\n\n${trace}`;

window.alert(msg);

console.error(msg);

}

}

app.mount('#app')

In E2E testing set the tests to break upon any warning / error output from console.

Keep Expressions in Template SIMPLE

These expressions are parsed as JS AND typechecked as TS. So keep them simple. Use "computed" when possible.