Javascript/Vuejs template for Crafting Sandbox

This is a Javascript/Vue.js template, configured for quick development setup in Crafting Sandbox.

Specifications

This template contains a single Ping component:

<template>
  <Ping />
</template>

This component consists of a form with a single input and a button.

<form @submit.prevent="pingServer">
  <input v-model="ping" placeholder="Ping server with some text...">
  ...
  <button type="submit">Submit</button>
</form>

Once form is submitted, a GET request is made to some backend server that exposes a /ping api. This Ping component then renders the api response data.

<div v-if="pong">
  <code>
    {{
      JSON.stringify({
        "ping": pong.ping,
        "received_at": new Date(pong.received_at).toLocaleString()
      }, null, 2)
    }}
  </code>
</div>

To run the app, you can do:

npm start -- --port 3001

App Definition

The following App Definition was used to create this template:

endpoints:
- name: app
  http:
    routes:
    - pathPrefix: "/"
      backend:
        target: js-vue
        port: app
    authProxy:
      disabled: true
workspaces:
- name: js-vue
  description: Template frontend using Js/Vue
  ports:
  - name: app
    port: 3001
    protocol: HTTP/TCP
  checkouts:
  - path: frontend
    repo:
      git: https://github.com/crafting-dev/template-javascript-vuejs
  packages:
  - name: nodejs
    version: 16.12.0