YOGAMOS is a modern web application built with Nuxt.js, designed to provide a seamless development experience with powerful tools and features.
Website URL: www.yogamos.es
- Nuxt 3: Leverage the power of the latest Nuxt framework for server-side rendering and static site generation.
- Nuxt UI Pro: Build beautiful and responsive user interfaces with premium NuxtUI components.
- Nuxt Content: Manage your content with ease using the Nuxt Content module.
- SEO & Performance: Integrated with
@nuxtjs/seo,@nuxtjs/robots, and@nuxtjs/sitemapfor improved search engine visibility. - Internationalization: Powered by
@nuxtjs/i18nfor multilingual support. - Optimized Images: Uses
@nuxt/imageandnuxt-og-imagefor optimized media handling. - Vitest & Playwright: Write and run fast, reliable tests for your application.
- GitHub Pages Deployment: Seamlessly deploy your application to GitHub Pages with a structured CI/CD pipeline.
Look at the Nuxt documentation to learn more.
Make sure to install dependencies:
# yarn
yarn install --immutableStart the development server on http://localhost:3000:
# yarn
yarn devBuild the application for production:
yarn buildLocally preview the production build:
yarn previewCheck out the deployment documentation for more information.
graph TD;
Dev[Development Branch] -->|Pull Request| Main[Main Branch];
Main -->|GitHub Actions: Build & Test| Deploy[GitHub Pages Deployment];
Deploy -->|Live on GitHub Pages| Production[www.yogamos.es];
Our deployment process uses GitHub Actions to automate builds and deployments to GitHub Pages.
- Trigger: The workflow runs on every push to the
mainbranch. - Setup: Installs Node.js, sets environment variables, and installs dependencies.
- Build & Generate: Runs
yarn generateto generate static files. - Deploy: Pushes the generated files to the
gh-pagesbranch.
name: Build and Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'yarn'
- name: Install dependencies
run: yarn install --immutable
- name: Generate static site
run: yarn generate
- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: gh-pages
folder: .output/publicgraph TD;
User[User] -->|Browses| Browser[Browser]
Browser -->|Requests| GitHubPages[GitHub Pages Hosting]
GitHubPages -->|Serves| NuxtApp[Nuxt Static Files]
NuxtApp -->|Fetches Data| API[API / CMS / Backend]
- User: The end-user accessing the website.
- Browser: Loads the static content from GitHub Pages.
- GitHub Pages: Hosts and serves the pre-built static Nuxt application.
- Nuxt Static Files: The output generated by Nuxt’s static site generation (
yarn generate). - API / CMS / Backend: External services for dynamic data fetching.
YOGAMOS uses @nuxtjs/i18n to provide a seamless multilingual experience. Content is organized into language-specific folders (content/en/, content/es/, content/fr/), allowing users to access pages in their preferred language.
We enhance discoverability with:
@nuxtjs/robots: Ensures proper indexing and search engine rules.@nuxtjs/sitemap: Generates a dynamic sitemap for improved SEO.@nuxtjs/seo: Provides meta tags and OpenGraph integration.
Make sure you have installed Vitest:
yarn install -D vitest @vue/test-utils jsdomRun tests using:
yarn test # Run all tests
yarn test:watch # Run tests in watch mode
yarn test:ui # Open Vitest UI- Unit Tests: Ensures components function correctly.
- Integration Tests: Validates interactions between components.
- SEO Tests: Checks meta tags.
- Error Handling: Ensures proper error responses.
Nuxt DevTools is enabled by default in Nuxt v3.8.0. Open it using Shift + Alt / ⇧ Shift + ⌥ Option + D in your app.
npx @eslint/config-inspector@latestVisit http://localhost:7777/ to visualize your ESLint configuration.
