Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Explain how to use Vue based Widgets

Offen
  • Stimmt etwas nicht?
#1,890 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
55/100
Issue-Typ
Dokumentation
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, laravel, php, vite
Bereich
documentation

Rechercherichtung

Start with the Widgets documentation and compare it with the linked Vite Tooling page. Explain the package.json dependency, the Vite plugin setup, and registering the Vue component in cp.js, including the working component name shown in the issue. Done when the Widget guide lets a reader follow the steps and see the component render; the issue names no documentation file or test.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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...

Vorherrschende Sprache
PHP
Sterne
133
Forks
405
Ø Merge
2 T. 2 Std.
Gemergte PRs (30 T.)
11

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus statamic/docs

Alle Issues in statamic/docs

Ähnliche Issues

Weitere Issues zu PHP

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.