Web Experience Toolkit (WET-BOEW) for VueJS

This is a VueJS version of the Government of Canada's Web Experience Toolkit (WET-BOEW)

WARNING: This is far from a complete port of WET-BOEW and is still in the experimental stage. Use at your own risk.

Technology Stack

• VueJS (version 3)
• TypeScript
• Vite

Prerequisites

You'll need the following:

• NodeJS (LTS version)
• Yarn v1 (Classic)
• Httpster
• Prettier

Installing Yarn Globally (the easy way)

npm i yarn -g

Installing Httpster Globally

npm i httpster -g

Installing Prettier

If you're using VSCode as your editor (recommended), just install the Prettier VSCode Extension

Otherwise you can install globally with:

npm i --save-exact prettier -g

Running a Dev Build

The first time you run a dev build, run:

yarn && yarn dev

Subsequently you can just run:

yarn dev

TIP: Keep it running while you work to see your changes instantly.

Running a Prod Build

yarn build && cd dist && httpster

Recommended IDE Setup

VSCode + Prettier + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can use the following:

If Using Volar

Run Volar: Switch TS Plugin on/off from VSCode command palette.

If Using Vetur

1. Install and add @vuedx/typescript-plugin-vue to the plugins section in tsconfig.json
2. Delete src/shims-vue.d.ts as it is no longer needed to provide module info to Typescript
3. Open src/main.ts in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"