developer.vuestorefront.io
eCommerce
TypeScript
Community Developer Portal
Welcome to our community developer portal repository. This project is dedicated to all our community members and contributors.
The developer portal is a hub of information about the Vue Storefront framework and the community materials. You will find videos, blog posts, documentation and much more.
<p>
</a>
</p>
<p>
<a rel="nofollow noopener" target="_blank" href="http://commitizen.github.io/cz-cli/"></p>
<p>
</a>
</p>
<p>
<a rel="nofollow noopener" target="_blank" href="https://stackblitz.com/github/vuestorefront/developer.vuestorefront.io"></p>
<p>
</a>
</p>
<blockquote>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-techforukraine" class="anchor" aria-hidden="true" href="#techforukraine"></a>#TechForUkraine
</h1>
<p>
<a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/1626923/155853691-d6d0a541-d3b9-40bf-b8f5-2d38303e9e49.png"></a>
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-russias-military-aggression-against-ukraine" class="anchor" aria-hidden="true" href="#russias-military-aggression-against-ukraine"></a><strong>Russia’s military aggression against Ukraine.</strong><br />
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-can-you-support-ukrainian-civil-society" class="anchor" aria-hidden="true" href="#how-can-you-support-ukrainian-civil-society"></a>How can you support Ukrainian civil society?
</h3>
<p>
All help is needed. If you are not able to help locally, by sheltering a fellow Ukrainian, you can also:
</p>
<ul dir="auto">
<li>
Support Ukraine Armed forces directly by sending funding to the special accounts.<br /> <a rel="nofollow noopener" target="_blank" href="https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi">NBU Special Account to Raise Funds for Ukraine’s Armed Forces</a>
</li>
<li>
Help the ICRC (Red Cross) with donations.<br /> <a rel="nofollow noopener" target="_blank" href="https://www.icrc.org/en/where-we-work/europe-central-asia/ukraine">Ukrainian<br /> Red Cross Society</a>
</li>
<li>
Donate to the United Help Ukraine.<br /> <a rel="nofollow noopener" target="_blank" href="https://unitedhelpukraine.org/">United Help Ukraine</a>
</li>
<li>
Donate to Voices of Children<br /> <a rel="nofollow noopener" target="_blank" href="https://voices.org.ua/en/">Voices of Children</a>
</li>
</ul>
</blockquote>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-it-works" class="anchor" aria-hidden="true" href="#how-it-works"></a>How it works?
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-tech-stack" class="anchor" aria-hidden="true" href="#tech-stack"></a>Tech Stack
</h3>
<p>
The project use as it’s tech stack the following technologies:
</p>
<ul dir="auto">
<li>
<a rel="nofollow noopener" target="_blank" href="https://v3.nuxtjs.org/">Nuxt 3</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://content.nuxtjs.org/">Nuxt Content</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://tailwindcss.com/">Tailwind CSS</a>
</li>
</ul>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-components" class="anchor" aria-hidden="true" href="#how-do-we-use-components"></a>How do we use <code>components</code>?
</h3>
<p>
In this project we are using two components structures:
</p>
<ul dir="auto">
<li>
Atomic Design
</li>
<li>
Active Components
</li>
</ul>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-what-is-atomic-design" class="anchor" aria-hidden="true" href="#what-is-atomic-design"></a>What is Atomic Design?
</h4>
<blockquote>
<p>
Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective<br /> interface design systems<br /> <a rel="nofollow noopener" target="_blank" href="https://atomicdesign.bradfrost.com/">Atomic Design by Brad Frost</a>
</p>
</blockquote>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-what-is-active-components" class="anchor" aria-hidden="true" href="#what-is-active-components"></a>What is Active Components?
</h4>
<p>
The principle of Active Components is to create reusable components which takes data manipulation upon itself, removing<br /> the need to add those code bits into a page, component or layout.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-layouts" class="anchor" aria-hidden="true" href="#how-do-we-use-layouts"></a>How do we use <code>layouts</code>?
</h3>
<p>
We are following the default <a rel="nofollow noopener" target="_blank" href="https://v3.nuxtjs.org/guide/directory-structure/layouts">Nuxt 3 Layout</a> structure.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-pages" class="anchor" aria-hidden="true" href="#how-do-we-use-pages"></a>How do we use <code>pages</code>?
</h3>
<p>
We are following the default <a rel="nofollow noopener" target="_blank" href="https://v3.nuxtjs.org/guide/directory-structure/pages">Nuxt 3 Pages</a> structure, with automatic route generation.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-composables" class="anchor" aria-hidden="true" href="#how-do-we-use-composables"></a>How do we use <code>composables</code>?
</h3>
<p>
We are following the default <a rel="nofollow noopener" target="_blank" href="https://v3.nuxtjs.org/guide/directory-structure/composables">Nuxt 3 Composables</a> structure, with automatic import, for most of the<br /> composables.<br /> There are other composables, which needs to be imported manually, those are related to specific usages, such as <code>UI</code><br /> or <a rel="nofollow noopener" target="_blank" href="#how-do-we-use-components"><code>activeComponents</code></a>.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-content" class="anchor" aria-hidden="true" href="#how-do-we-use-content"></a>How do we use <code>content</code>?
</h3>
<p>
We are using <a rel="nofollow noopener" target="_blank" href="https://content.nuxtjs.org/">Nuxt Content</a> as our content management system. In the <code>content</code> folder you will find,<br /> different types of content, like <code>video</code>, <code>blog</code> or <code>documentation</code>.<br /> We are heavily using the front-matter field to manipulate the data and fetch information across different areas of the<br /> portal.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-server" class="anchor" aria-hidden="true" href="#how-do-we-use-server"></a>How do we use <code>server</code>?
</h3>
<p>
We are following the default <a rel="nofollow noopener" target="_blank" href="https://v3.nuxtjs.org/guide/features/server-routes">Nuxt 3 Server Routes</a> structure.<br /> The <code>server</code> folder has special APIs developed for the usage of the portal, like fetching data from <a rel="nofollow noopener" target="_blank" href="https://dev.to/">Dev.to</a>, or<br /> internal data to render content.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-do-we-use-locales" class="anchor" aria-hidden="true" href="#how-do-we-use-locales"></a>How do we use <code>locales</code>?
</h3>
<p>
All the <code>components</code>, <code>pages</code> and <code>layouts</code> are using internationalization to handle text and time. We are using<br /> the <a rel="nofollow noopener" target="_blank" href="https://vue-i18n.intlify.dev/">Vue i18n</a> plugin to handle the translations.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-deployment" class="anchor" aria-hidden="true" href="#deployment"></a>Deployment
</h2>
<p>
The Vue Storefront developer portal is currently being deployed to the Vue Storefront Cloud Platform.<br /> We are using <a rel="nofollow noopener" target="_blank" href="https://deploybot.app/">Deploybot</a> to manage the deployment automatically.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-contributing" class="anchor" aria-hidden="true" href="#contributing"></a>Contributing
</h2>
<p>
If you like the ideas behind Vue Storefront and want to become a contributor – join our <a rel="nofollow noopener" target="_blank" href="https://discord.vuestorefront.io/">Discord server</a>, check<br /> the list of the active issues or contact us directly via contributors(at)vuestorefront(dot)io.<br /> If you have discovered a 🐜 or have feature suggestion, feel free to create an issue on GitHub.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-support-us" class="anchor" aria-hidden="true" href="#support-us"></a>Support us
</h2>
<p>
<strong>Vue Storefront is and always will be Open Source, released under MIT Licence.</strong><br /> You can support us in various ways:
</p>
<ul dir="auto">
<li>
<strong>Contribute</strong> – this is how the Core Team is supporting the project!
</li>
<li>
<strong>Evangelize</strong> – tweet about us, take some speaking slot at a tech conference, etc.
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-partners" class="anchor" aria-hidden="true" href="#partners"></a>Partners
</h2>
<p>
Vue Storefront is a Community effort brought to You by our great Core Team and supported by the following companies.<br /> <strong>See Vue Storefront partners directory</strong><br /> Vue Storefront source code is completely free and released under the MIT License.<br />
</p>