Project Structure

Project Structure

The playground is a standard Vite + Vue 3 + TypeScript project with a few Selldone-specific additions. This page lists every file and explains the dependencies and configuration.

Files

storefront-playground/
├── index.html                 # Shop and Business OS <meta> configuration, mounts #app
├── package.json               # Scripts and dependencies
├── vite.config.ts             # Vite with @vitejs/plugin-vue
├── tsconfig.json              # TypeScript for src/
├── tsconfig.node.json         # TypeScript for vite.config.ts
├── public/vite.svg            # Favicon
├── src/
│   ├── main.ts                # SelldoneCore.Setup(), StorefrontSDK.Setup(), mounts the app
│   ├── App.vue                # Root component
│   ├── components/
│   │   └── FetchProducts.vue  # Fetches and renders products and categories
│   ├── style.css              # Global styles
│   ├── assets/vue.svg
│   └── vite-env.d.ts          # Vite client types
├── _doc/                      # README images
└── .vscode/extensions.json    # Recommends Vue.volar

Dependencies

Package	Version range	Role
vue	^3.4.21	UI framework.
@selldone/sdk-storefront	^1.0.10	Storefront SDK (window.$storefront).
vite	^5.2.0 (dev)	Dev server and bundler.
@vitejs/plugin-vue	^5.0.4 (dev)	Vue single-file components for Vite.
typescript	^5.2.2 (dev)	Type checking.
vue-tsc	^2.0.6 (dev)	Type-checks .vue files during npm run build.

src/main.ts and FetchProducts.vue also import from @selldone/core-js. It is not listed directly in package.json; it is installed as a dependency of @selldone/sdk-storefront. Add it explicitly (npm install @selldone/core-js) if you want to control its version.

Scripts

Script	Command
dev	vite
build	vue-tsc && vite build
preview	vite preview

TypeScript

tsconfig.json targets ES2020 with moduleResolution: "bundler", strict: true, noUnusedLocals, noUnusedParameters, allowImportingTsExtensions and noEmit. It includes src/**/*.ts, src/**/*.tsx and src/**/*.vue. Because the playground imports core model files with a .ts extension, allowImportingTsExtensions is required.

Vite

vite.config.ts only registers the Vue plugin:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

Building

npm run build writes the production files to dist/ (ignored by Git). The output is a static site: index.html with the meta tags plus the bundled JavaScript and CSS. Serve it from any static host, or preview it with npm run preview.

For a full storefront that is deployed to Selldone as a Layout, start from Storefront and use the Selldone CLI.

License

This repository does not currently include a license file. Ask in an issue before reusing the code.

Related

• Getting Started
• Shop Configuration
• Fetching Products