OpenSpec™

Documentation

Get this Template

OpenSpec™

Documentation

Guides

Welcome

Getting Started

Introduction

Quick Start

Create an Application

Building

Props

Component Events

Slots

Component Registration

Last update in Jun 2023 - v1.0.0

Getting Started

Quick Start

Try Spec Online

If you prefer a plain HTML setup without any build steps, you can use this JSFiddle as your starting point.

Spec.js Project Structure

This page provides an overview of the file and folder structure of a Next.js project. It covers top-level files and folders, configuration files, and routing conventions within the app and pages directories.

Creating a Spec Application

Familiarity with the command line Install Node.js version 16.0 or higher

In this section we will introduce how to scaffold a Spec Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Spec Single-File Components (SFCs).

Make sure you have an up-to-date version of Node.js installed and your current working directory is the one where you intend to create a project. Run the following command in your command line (without the > sign):

Terminal

> npm init spec@latest

Terminal

> npm init spec@latest

If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:

The recommended IDE setup is Visual Studio Code + Volar extension. If you use other editors, check out the IDE support section.

More tooling details, including integration with backend frameworks, are discussed in the Tooling Guide.

When you are ready to ship your app to production, run the following:

Terminal

> npm run build

Terminal

> npm run build

Browser Support

More information about which web browser your app will run on.

Spec.js

Description

Firefox

Google Chrome

Arc

Opera

Microsoft Edge

Brave

Safari

Using Spec from CDN

You can use Spec directly from a CDN via a script tag:

Terminal

<script src="https://unpkg.com/spec@3/dist/spec.statl.js"></script>

Terminal

<script src="https://unpkg.com/spec@3/dist/spec.statl.js"></script>

When using Spec from a CDN, there is no "build step" involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework. However, you won't be able to use the Single-File Component (SFC) syntax.

Using the Global Build

The above link loads the global build of Spec, where all top-level APIs are exposed as properties on the global Spec object. Here is a full example using the global build:

Terminal

<script src="https://unpkg.com/spec@3/dist/spec.statl.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Spec

  createApp({
    data() {
      return {
        message: 'Hello Spec'
      }
    }
  }).mount('#app')
</script>

Terminal

<script src="https://unpkg.com/spec@3/dist/spec.statl.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Spec

  createApp({
    data() {
      return {
        message: 'Hello Spec'
      }
    }
  }).mount('#app')
</script>

Import Maps Browser Support

Import Maps is a relatively new browser feature. Make sure to use a browser within its support range. In particular, it is only supported in Safari 16.4+.

Installation

Node.js 16.8 or later. macOS, Windows (including WSL), and Linux are supported.

Introduction

Create an Application