Skip to content

devpora/step-by-step-example-nuxt3-tailwind-restapi-pinia

Repository files navigation

Step-by-step example for Nuxt3

(English)

All data is in separate branches

Basic info:

  • 🚧 nuxt3 and tailwind
  • 🎨 two layouts (website and dashboard)
  • 🌍 i18n
  • 🌜 dark/light
  • 🌐 login and register from external Rest API + oAuth Google, GitHub and GitLab
  • 🍪 cookie for permanent login
  • 🔑 middleware is-admin, is-user and is-guest
  • 🔧 eslint, prettier
  • 🔒 local ssl

Guide📖

(Slovensky)

Všetky dáta sú v samostatných vetvách

Základné info:

  • 🚧 nuxt3 a tailwind
  • 🎨 dva layouty (web a admin)
  • 🌍 i18n
  • 🌜 dark/light
  • 🌐 prihlásenie a registrácia cez externé Rest API + oAuth Google, GitHub a GitLab
  • 🍪 cookie pre permanentné prihlásenie
  • 🔑 middleware is-admin, is-user a is-guest
  • 🔧 eslint, prettier
  • 🔒 lokálne ssl

Návod📖


en

Development

cp .env.example .env # - copying the env and modifying the url to the api if necessary
yarn install # - install dependecies
yarn dev # - start development server on http://localhost:3000

yarn lint:js # - Show errors and warnings
yarn lintfix # - Fix

https for localhost

npm install -g mkcert local-ssl-proxy # - Install globally (not for the project) mkcert and ssl proxy
mkcert create-ca # - Create root cert
mkcert create-cert --key server-key.pem --cert server-cert.pem # - Create cert for page
yarn ssl # - start development https server on https://localhost:3443

Production

yarn build # - build for production
yarn preview # - locally preview production build

Changes

Added cookie to save information about logged user

Release notes

  • v016 - cookie
  • v015 - notification
  • v014 - oAuth
  • v013 - fontawesome
  • v012 - local ssl
  • v011 - eslint + prettier
  • v010 - added admin section
  • v009 - connect to RestApi
  • v008 - login and register page
  • v007 - added language
  • v006 - default layout with Header/Footer components
  • v005 - heroicons package
  • v004 - modified darkmode for scrolling
  • v003 - add Header, Footer and switch light/dark mode
  • v002 - add tailwindcss
  • v001 - add nuxt 3

sometime in the future

  • pinia
  • roles

Other:

Nuxt 3 documentation

Tailwind documentation

Api DevPora


sk

Vývoj

cp .env.example .env # - prekopírovanie env a v prípade potreby úprava url na api
yarn install # - inštalácia balíkov
yarn dev # - spustenie servera na http://localhost:3000

yarn lint:js # - Zobrazenie chýb
yarn lintfix # - Oprava chýb

lokálne https

npm install -g mkcert local-ssl-proxy # - Nainštalujeme globálne (nie pre projekt) mkcert a ssl proxy
mkcert create-ca # - Vytvoríme root certifikát
mkcert create-cert --key server-key.pem --cert server-cert.pem # - Vytvoríme certifikát
yarn ssl # - spustenie https servera na https://localhost:3443

Produkcia

yarn build # - zostavenie pre produkciu
yarn preview # - lokálny náhľad zostavenej aplikácie

Zmeny

  • Pridané cookie na uloženie informácie o prihlásenom používateľovi

Poznámky k vydaniu

  • v016 - cookie
  • v015 - notifikácie
  • v014 - oAuth
  • v013 - fontawesome
  • v012 - lokálne ssl
  • v011 - eslint + prettier
  • v010 - pridaná admin sekcia
  • v009 - pripojenie rest api
  • v008 - pridané login stránky
  • v007 - pridané jazykové verzie
  • v006 - layout a Header/Footer komponenty
  • v005 - pridaný balík Heroicons
  • v004 - upravený darkmode pre scrolovanie
  • v003 - pridaný Header, Footer a prepínač na svetlý/tmavý režim
  • v002 - pridaný tailwindcss
  • v001 - pridaný nuxt 3

sometime in the future

  • role

Ostatné:

Nuxt 3 dokumentácia

Tailwind dokumentácia

Api DevPora

About

Step-by-step guide for create page in nuxt. Master and all branches run in devpora.com

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published