VTEX

Laioutr App integrating VTEX as the commerce backend for a Laioutr storefront, using Nuxt.

See laioutr.com for more information about Laioutr.

• ✨  Release Notes

Features

The read path, bound to canonical Orchestr tokens:

• Categories — the VTEX category tree as queries, child, breadcrumb and product links, and a resolver for identity, SEO, content and media. A category's slug is its whole URL path, because names repeat across the tree.
• Menu — a menu is a subtree of the category tree, selected by alias.
• Products — by slug, by category and by search term, with variants, breadcrumb and category links, and resolvers for identity, media, prices, brand, specifications and option groups.
• Product variants — VTEX SKUs, with options, availability, shipping and prices.
• Search — products by term with facets, behind a SearchProvider interface. The one adapter is Legacy Search. searchProvider: 'intelligent' type-checks, but no Intelligent Search adapter exists and nothing reads the option, so every search runs through Legacy Search.
• Search suggestions — matching categories and products for a term. Legacy Search has no autocomplete endpoint, so full-text search stands in for one.
• Cart — the Checkout orderForm as canonical Cart and CartItem: read, add, update quantity, remove, and a checkout URL bound to the orderForm. A cart is minted on the first add, not on the first page view. Line items are addressed by VTEX's stable uniqueId; the positional index the Checkout API demands is resolved per mutation, because indices shift when a line is removed.
• Page-indexes — product detail, category listing and search, so the storefront has URLs.
• Images — a vtex Nuxt Image provider that resizes on VTEX's own CDN.
• Studio templates — menus and category listings offer the category tree as labelled query inputs, each entry carrying its full trail, so an editor picks a category instead of typing an id.

Not yet built: checkout, authentication, customer, orders and reviews. See the implementation plan for the full intended scope and docs/environment.md for the account state and the API traps.

Quick Setup

Follow the Laioutr NPM Guide for connecting to npm.laioutr.cloud.

• pnpm install
• npx @laioutr/cli project fetch-rc --project <organization slug>/<project slug> --secret <project secret key> - This will load the laioutrrc.json file with the current remote project configuration.
• pnpm dev:prepare

That's it! You can now use VTEX in your Laioutr Frontend ✨

You can find a thorough guide on getting started with Laioutr development in our developer guide.

Linting and Formatting

We use ESLint and Prettier to lint and format the code. This repository contains opinionated configurations for both tools. You can, of course, replace them with your own configurations.

Publishing

Releases run through changesets and publish to npmjs.org with npm trusted publishing, so CI needs no npm token and every release carries provenance.

Day to day: run pnpm changeset to describe your change and merge it. The release workflow opens a "chore: release" PR collecting the pending changesets; merging that builds and publishes.

One-time setup per repository

1. Repository secrets

   • NPM_LAIOUTR_TOKEN — read access to npm.laioutr.cloud, so CI can install @laioutr-core/*.
   • RELEASE_TOKEN — a fine-grained PAT owned by the org, scoped to this repo, with Contents: read and write and Pull requests: read and write. A PR opened with the default GITHUB_TOKEN cannot trigger workflows, so release PRs would arrive with no CI and could never satisfy a required-status rule.

2. Bootstrap the package on npm. Trusted publishing is configured on a package that already exists, so the very first version has to be published by hand. publishConfig.provenance fails outside CI — there is no OIDC provider — so disable it for that one publish:

   pnpm prepack
   npm publish --access public --no-provenance

   A brand-new package can 404 on the registry for a few minutes afterwards. That is replication lag, not a failed publish; check again before re-running anything.

3. Configure the trusted publisher on the package's npm settings page: GitHub Actions, this repository, workflow release.yml. Every release after that is tokenless.

Private publishing

If you want to publish a private package to npm.laioutr.cloud, you need to:

1. Make sure you have a .npmrc with your private npm registry token.
2. Add this line to the root of the package.json file: "publishConfig": { "registry": "https://npm.laioutr.cloud/" }
3. Make sure your package-name follows the @laioutr-org/<organization-slug>__<package-name> format.

After that you can run pnpm release to publish the package to npm.laioutr.cloud.

More information for publishing can be found in the NPM Guide.

Contribution

Follow the setup guide to get started.