Call it like this:
<api-status theme="dark" status-endpoint="/api/status"></api-status>
It uses window.fetch()
which you might have to polyfill if you haven't already: yarn add whatwg-fetch
The component expects a JSON response with a property called message
. If it's non-empty, it'll show the message.
Pretty straightforward.
To use this on non-Vue projects, make sure you have vue-cli installed, save the component above into a file (e.g.
api-status.vue
) then runvue build --prod --lib ApiStatus api-status.vue
. This will create adist
folder containing minified JS and CSS files.In your project, open up your HTML file (e.g.
index.html
) and add to the head:To the body, add something like this: