Fio de Nós is a single-page e-commerce storefront template for independent clothing brands, built with Vue and TypeScript, styled with Tailwind CSS, bundled by Vite, and deployable on Vercel.
What is Fio de Nós?
Fio de Nós is a single web page application store template, originally built as the website for the independent Brazilian clothing brand of the same name. It takes product and store content from local JSON files and renders a complete one-page storefront, including a custom modal component written from scratch in Vue rather than imported from a library. The template is compiled with Vite, styled with Tailwind CSS, written in TypeScript, and configured for direct deployment on Vercel. According to the repository metadata, it has been starred 3 times and is tagged with topics such as clothing, store, modal, whatsapp, vercel, vite, and vue.
Key Features
- JSON-driven data editing — all store data lives in local JSON files, so products and settings can be updated without touching Vue component code.
- Hand-built Vue modal — the modal is implemented from scratch in Vue, with no third-party modal dependency.
- Modular layout — the one-page layout is built from reusable modular components, making sections easy to rearrange or extend.
- Vercel deployment — the project is set up to deploy on Vercel as a static site.
- Vue + Vite + TypeScript stack — development runs on Vue with TypeScript and Vite's hot-reload dev server; yarn build compiles and minifies the production bundle.
- Tailwind CSS styling — the interface uses Tailwind CSS utility classes, loaded via the Tailwind CDN because the package dependency occasionally fails during builds.
- Pexels photography — the template ships with photos credited to Cottonbro and Mikhail Nilov on Pexels.
Who is it for?
- Independent clothing brands — publish a one-page storefront with a product slideshow and modal-based flow instead of paying for a hosted e-commerce platform.
- Front-end developers — use the repository as a starter for Vue + TypeScript + Tailwind client projects, since all store content is editable through JSON and requires no code changes.
- Small store owners in Brazil — the template was built for a Brazilian clothing brand, and its topic tags include whatsapp, matching the WhatsApp ordering pattern common among Brazilian independent stores.
What can you do with Fio de Nós?
- Launch a store quickly: run yarn install, then yarn dev to open the storefront locally with hot-reload, or yarn build to produce a minified production build.
- Re-skin the brand: swap the included Pexels photos and edit the JSON data to match a different brand's catalog.
- Deploy to Vercel: connect the repository to Vercel using the included deployment setup to publish the static site.
How does Fio de Nós work?
The documented workflow is a standard Vite/Vue setup: yarn install installs dependencies, yarn dev compiles the app with hot-reload for development, and yarn build compiles and minifies for production. Store data is edited in local JSON files, and the single-page app renders the storefront content from those files.
Pricing
The template is free: it is published as a public GitHub repository and can be cloned and deployed without payment.
Known issues
The repository documentation lists four known issues: Vue warnings on emit; a slideshow that does not reset its timer after the user manually changes slides; difficulty getting the Vercel deployment indexed by search engines (the author notes uncertainty about whether server-side rendering would fix it); and reliance on the Tailwind CDN because the Tailwind dependency sometimes fails.
FAQ
Is Fio de Nós free?
Yes — the template is a public GitHub repository. You can clone it, run yarn install, and use it for your own store or as a starting point for client work, with no purchase required.
What tech stack does Fio de Nós use?
The template uses Vue with TypeScript, compiled by Vite, and styled with Tailwind CSS on top of HTML5 and CSS3. The production build is designed to be deployed on Vercel, and styling relies on the Tailwind CDN because the package dependency occasionally fails.
How do I edit the store data?
All store data is stored in local JSON files. Edit those files to change products and other content — the Vue components render from the JSON, so no component code changes are required.
How do I run the project locally?
Run yarn install to install dependencies, yarn dev to start a development server with hot-reload, and yarn build to compile and minify for production. The repository's configuration reference links to the Vue CLI documentation for further customization.
Does Fio de Nós have known limitations?
Yes. The author documents Vue warnings on emit, a slideshow timer that does not reset after manual navigation, search-engine indexing problems on the Vercel deployment, and occasional Tailwind build failures that require using the Tailwind CDN as a fallback.
