Explain how to use Vue based Widgets

[tao]

The documentation explains how to create a Widget, but doesn't actually explain how to get it to render...

If I just follow the steps in the docs, the Dashboard will try render the component but you'll see this in the source:

<div class="px-3 starting-style-transition null w-full">
    <missingtranslations message="Hello World!"></missingtranslations>
</div>

This is for a component called MissingTranslations

<?php

namespace App\Widgets;

use Statamic\Facades\Entry;
use Statamic\Sites\Sites;
use Statamic\Widgets\VueComponent;
use Statamic\Widgets\Widget;

class MissingTranslations extends Widget
{
    public function component()
    {
        return VueComponent::render('MissingTranslations', [
            'message' => 'Hello World!',
        ]);
    }
}

To actually get the Widget to render you need to follow some steps in the Vite Tooling page:

First the package.json needs to be updated to install @statamic

    "dependencies": {
        "@statamic/cms": "file:./vendor/statamic/cms/resources/dist-package"
    },

Then you need to run npm install and add the Statamic plugin to the Vite config:

import statamic from '@statamic/cms/vite-plugin';

export default defineConfig({
    plugins: [
        laravel({ ... }),
        statamic(),
    ],
});

And then the component still needs to be registered? in cp.js

import MissingTranslations from './components/widgets/MissingTranslations.vue';

Statamic.booting(() => {
    // Statamic.$components.register('missing-translations', MissingTranslations); // doesnt work
    // Statamic.$components.register('missingtranslations', MissingTranslations); // doesnt work 
    Statamic.$components.register('MissingTranslations', MissingTranslations); // works
});

That's a lot of extra steps that seem to be missing and important? I can't figure out if there was an easier way to get it to do all this automatically or if I totally missed something...