├── content ├── example.md ├── template-guide.md ├── README.md └── manifest.json.md ├── public ├── icon.png ├── logo.png ├── favicon.ico ├── images │ └── banner-gh.png ├── pwa │ ├── icons │ │ ├── Icon48.png │ │ ├── Icon72.png │ │ ├── Icon96.png │ │ ├── icon144.png │ │ ├── icon168.png │ │ ├── icon192.png │ │ ├── icon512.png │ │ └── apple-touch-icon.png │ └── manifest.json ├── README.md └── worker.js ├── .gitignore ├── tsconfig.json ├── layouts ├── default.vue └── README.md ├── assets ├── fonts │ └── san-francisco-display │ │ ├── SFUIDisplay-Black.otf │ │ ├── SFUIDisplay-Bold.ttf │ │ ├── SFUIDisplay-Heavy.otf │ │ ├── SFUIDisplay-Light.ttf │ │ ├── SFUIDisplay-Medium.otf │ │ ├── SFUIDisplay-Thin.otf │ │ ├── SFUIDisplay-Regular.otf │ │ ├── SFUIDisplay-Semibold.otf │ │ └── SFUIDisplay-Ultralight.otf ├── tailwind.css └── README.md ├── lang ├── en.json └── es.json ├── test └── global.test.js ├── pages ├── blog.vue ├── about.vue ├── index.vue └── README.md ├── components ├── MobileMenu.vue ├── README.md ├── AppFooter.vue ├── AppHeader.vue ├── library │ ├── ButtonNuxt.vue │ └── MouseMove.vue ├── SplashScreen.vue └── Switch.vue ├── tailwind.config.js ├── app.config.ts ├── package.json ├── utils └── README.md ├── middleware └── README.md ├── README.md ├── app.vue └── nuxt.config.ts /content/example.md: -------------------------------------------------------------------------------- 1 | Esto es un ejemplo -------------------------------------------------------------------------------- /public/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/icon.png -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/logo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/images/banner-gh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/images/banner-gh.png -------------------------------------------------------------------------------- /public/pwa/icons/Icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/Icon48.png -------------------------------------------------------------------------------- /public/pwa/icons/Icon72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/Icon72.png -------------------------------------------------------------------------------- /public/pwa/icons/Icon96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/Icon96.png -------------------------------------------------------------------------------- /public/pwa/icons/icon144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/icon144.png -------------------------------------------------------------------------------- /public/pwa/icons/icon168.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/icon168.png -------------------------------------------------------------------------------- /public/pwa/icons/icon192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/icon192.png -------------------------------------------------------------------------------- /public/pwa/icons/icon512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/icon512.png -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /public/pwa/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/public/pwa/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Black.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Heavy.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Heavy.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Light.ttf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Medium.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Thin.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Thin.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Regular.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Semibold.otf -------------------------------------------------------------------------------- /lang/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nuxt 3 App", 3 | "subtitle": "Template", 4 | "hello": "Hello", 5 | "social": { 6 | "twitter": "Twitter in english" 7 | } 8 | } -------------------------------------------------------------------------------- /lang/es.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nuxt 3 App", 3 | "subtitle": "Plantilla", 4 | "hello": "Hola", 5 | "social": { 6 | "twitter": "Twitter en español" 7 | } 8 | } -------------------------------------------------------------------------------- /assets/fonts/san-francisco-display/SFUIDisplay-Ultralight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexdeploy/nuxt-pwa-template/HEAD/assets/fonts/san-francisco-display/SFUIDisplay-Ultralight.otf -------------------------------------------------------------------------------- /test/global.test.js: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest' 2 | 3 | describe('Testing test', () => { 4 | it('works!', async () => { 5 | expect(true).toBe(true) 6 | }) 7 | 8 | }) -------------------------------------------------------------------------------- /pages/blog.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/MobileMenu.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: "class", 3 | theme: { 4 | extend: { 5 | colors: { 6 | 'gray-dark': '#121212' 7 | } 8 | }, 9 | fontFamily: { 10 | sf: "San Francisco", 11 | sfbold: "San Francisco Bold", 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /app.config.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Nuxt 3 Config File 3 | * https://nuxt.com/docs/getting-started/configuration#app-configuration 4 | */ 5 | export default defineAppConfig({ 6 | title: 'Hello Nuxt', 7 | blog:{ 8 | enabled: true, 9 | }, 10 | theme: { 11 | dark: true, 12 | colors: { 13 | primary: '#ff0000' 14 | } 15 | } 16 | }) -------------------------------------------------------------------------------- /content/template-guide.md: -------------------------------------------------------------------------------- 1 | # Guia para crear la plantilla de Nuxt 3 2 | 3 | 1. Crear proyecto con `npx nuxi init ` e instalar dependencias `yarn install`. 4 | 5 | 2. Crear archivo de configuración `app.config.ts`. 6 | 7 | 3. Crear los directorios básicos. 8 | ```` 9 | - components/ 10 | - pages/ 11 | - layouts/ 12 | - content/ 13 | - assets/ 14 | - public/ 15 | ```` 16 | 17 | -------------------------------------------------------------------------------- /public/README.md: -------------------------------------------------------------------------------- 1 | # `public/` Directory 2 | 3 | The `public/` directory is used as a public server for static assets publicly available at a defined URL of your application. 4 | 5 | You can get a file in the `public/` directory from your application's code or from a browser by the root URL `/`. 6 | 7 | ## Example 8 | 9 | For example, referencing an image file in the public/img/ directory, available at the static URL `/img/nuxt.png`: 10 | 11 | ````html 12 | 15 | ```` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare", 9 | "test": "vitest" 10 | }, 11 | "devDependencies": { 12 | "@nuxt/content": "^2.2.2", 13 | "@nuxtjs/color-mode": "^3.2.0", 14 | "@nuxtjs/i18n": "^8.0.0-beta.6", 15 | "nuxt": "3.0.0", 16 | "vitest": "^0.25.3" 17 | }, 18 | "dependencies": { 19 | "@nuxtjs/tailwindcss": "^6.1.3", 20 | "nuxt-icon": "^0.1.8" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /utils/README.md: -------------------------------------------------------------------------------- 1 | # `utils/` [Directory](https://nuxt.com/docs/guide/directory-structure/utils) 2 | 3 | Nuxt 3 uses the `utils/` directory to automatically import helper functions and other utilities throughout your application using auto-imports! 4 | 5 | >> The main purpose of the `utils/` directory is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.The way utils/ auto-imports work and are scanned is identical to the [composables/ directory](https://nuxt.com/docs/guide/directory-structure/composables). You can see examples and more information about how they work in that section of the docs. -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # `components/` [Directory](https://nuxt.com/docs/getting-started/views#components) 2 | 3 | Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them. 4 | 5 | *app.vue* 6 | ````html 7 | 15 | ```` 16 | 17 | *components/AppAlert.vue* 18 | ````html 19 | 24 | ```` -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | -------------------------------------------------------------------------------- /public/worker.js: -------------------------------------------------------------------------------- 1 | console.log('Service worker file loaded.') 2 | 3 | /** 4 | * * FETCH event 5 | * ? It is triggered when the browser is requesting a resource 6 | * TODO: Add the logic to handle the request (investigate best practices and options) 7 | */ 8 | self.addEventListener("fetch", (event) => { 9 | /* event 10 | .respondWith( 11 | console.log('fetching!'), 12 | ); */ 13 | }); 14 | 15 | /** 16 | * * INSTALL event 17 | * * It is triggered when the service worker has been installed 18 | * ? It is the best place to cache the app 19 | * TODO: Add the resources to cache 20 | */ 21 | self.addEventListener("install", (event) => { 22 | 23 | console.log('Installing service worker...') 24 | /* 25 | event.waitUntil( 26 | // ... 27 | ); 28 | */ 29 | }); -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # `pages/` [Directory](https://nuxt.com/docs/getting-started/views#pages) 2 | 3 | Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content. 4 | 5 | To use pages, create pages/index.vue file and add `` component to the *app.vue* (or remove *app.vue* for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory. 6 | 7 | *pages/index.vue* 8 | ````html 9 | 17 | ```` 18 | 19 | *pages/about.vue* 20 | ````html 21 | 26 | 27 | ```` -------------------------------------------------------------------------------- /assets/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | /* 6 | * Global styles 7 | */ 8 | 9 | body { 10 | @apply dark:bg-gray-dark bg-gray-100 min-h-screen min-w-full; 11 | } 12 | 13 | h1, h2, h3, h4, h5, h6, span { 14 | @apply dark:text-gray-100 text-gray-900 font-sf 15 | } 16 | 17 | p, li { 18 | @apply dark:text-gray-200 text-gray-800 19 | } 20 | 21 | /* Transition Effect (All elements) */ 22 | * { 23 | transition: all 0.25s ease-out; 24 | } 25 | 26 | /* 27 | * Body sizes 28 | */ 29 | 30 | body { 31 | @apply max-w-5xl mx-auto; 32 | } 33 | 34 | /* Page transition effects */ 35 | .page-enter-active, 36 | .page-leave-active { 37 | transition: all 0.3s; 38 | } 39 | .page-enter-from, 40 | .page-leave-to { 41 | opacity: 0; 42 | filter: blur(1rem); 43 | } 44 | 45 | @font-face { 46 | font-family: "San Francisco"; 47 | src: url("./fonts/san-francisco-display/SFUIDisplay-Light.ttf") format('truetype'); 48 | } 49 | 50 | @font-face { 51 | font-family: "San Francisco Bold"; 52 | src: url("./fonts/san-francisco-display/SFUIDisplay-Bold.ttf") format('truetype'); 53 | } -------------------------------------------------------------------------------- /components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # `assets/` Directory 2 | 3 | Nuxt uses **Vite** or **webpack** to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through plugins (for Vite) or loaders (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation). 4 | 5 | By convention, Nuxt uses the `assets/` directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it. 6 | 7 | In your application's code, you can reference a file located in the `assets/` directory by using the `~/assets/ path`. 8 | 9 | ## Example 10 | 11 | For example, referencing an image file that will be processed if a build tool is configured to handle this file extension: 12 | 13 | *app.vue* 14 | ````html 15 | 18 | ```` 19 | 20 | >> Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the `public/` directory. -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # `middleware/` [Directory](https://nuxt.com/docs/guide/directory-structure/middleware) 2 | 3 | Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route. 4 | 5 | >> Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app. 6 | 7 | There are three kinds of route middleware: 8 | 9 | 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used. 10 | 11 | 2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (Note: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.) 12 | 13 | 3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change. 14 | 15 | The first two kinds of route middleware can be defined in `definePageMeta`. 16 | 17 | [Here](https://nuxt.com/docs/guide/directory-structure/middleware) is more info about middleware. -------------------------------------------------------------------------------- /public/pwa/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Nuxt PWA Template", 3 | "short_name": "Nuxt PWA", 4 | "description": "A awesome PWA template build with Nuxt", 5 | "start_url": "https://nuxt3-template.netlify.app/", 6 | "display": "standalone", 7 | "orientation": "portrait", 8 | "background_color": "#121212", 9 | "theme_color": "#121212", 10 | "scope": "https://nuxt3-template.netlify.app/", 11 | "icons": [{ 12 | "src": "icons/icon48.png", 13 | "sizes": "48x48", 14 | "type": "image/png" 15 | }, { 16 | "src": "icons/icon72.png", 17 | "sizes": "72x72", 18 | "type": "image/png" 19 | }, { 20 | "src": "icons/icon96.png", 21 | "sizes": "96x96", 22 | "type": "image/png" 23 | }, { 24 | "src": "icons/icon144.png", 25 | "sizes": "144x144", 26 | "type": "image/png" 27 | }, { 28 | "src": "icons/icon168.png", 29 | "sizes": "168x168", 30 | "type": "image/png" 31 | }, { 32 | "src": "icons/icon192.png", 33 | "sizes": "192x192", 34 | "type": "image/png" 35 | }, { 36 | "src": "icons/icon512.png", 37 | "sizes": "512x512", 38 | "type": "image/png", 39 | "purpose": "any maskable" 40 | }] 41 | } -------------------------------------------------------------------------------- /components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 40 | 41 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # `layouts/` [Directory](https://nuxt.com/docs/getting-started/views#layouts) 2 | 3 | Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `` components to display the page content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata. 4 | 5 | >> If you only have a single layout in your application, we recommend using app.vue with the `` component instead. 6 | 7 | *layouts/default.vue* 8 | ````html 9 | 16 | ```` 17 | 18 | *pages/index.vue* 19 | ````html 20 | 28 | ```` 29 | 30 | *pages/about.vue* 31 | ````html 32 | 37 | ```` 38 | 39 | If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](https://nuxt.com/docs/guide/directory-structure/layouts). -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # Nuxt PWA 5 | 6 | [![Generic badge](https://img.shields.io/badge/Nuxt-3.0.0-.svg)](https://shields.io/) 7 | [![Generic badge](https://img.shields.io/badge/Tailwind-6.1.3-38bdf8.svg)](https://shields.io/) 8 | 9 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 10 | 11 | 12 | # Features and Modules 13 | 14 | 15 | This template comes with some [Nuxt modules](https://nuxt.com/modules) pre-installed and standard configuration. 16 | 17 | - Content 18 | 19 | - Color mode 20 | 21 | - i18n 22 | 23 | - Tailwind 24 | 25 | - Icon 26 | 27 | - Vitest 28 | ## Setup 29 | 30 | Make sure to install the dependencies: 31 | 32 | ```bash 33 | # yarn 34 | yarn install 35 | 36 | # npm 37 | npm install 38 | 39 | # pnpm 40 | pnpm install --shamefully-hoist 41 | ``` 42 | 43 | ## Development Server 44 | 45 | Start the development server on http://localhost:3000 46 | 47 | ```bash 48 | npm run dev 49 | ``` 50 | 51 | ## Production 52 | 53 | Build the application for production: 54 | 55 | ```bash 56 | npm run build 57 | ``` 58 | 59 | Locally preview production build: 60 | 61 | ```bash 62 | npm run preview 63 | ``` 64 | 65 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 66 | 67 | -------------------------------------------------------------------------------- /content/README.md: -------------------------------------------------------------------------------- 1 | # `content/` [Directory](https://nuxt.com/docs/guide/directory-structure/content) 2 | 3 | The Nuxt Content module reads the `content/` directory in your project and parses .md, .yml, .csv and .json files to create a file-based CMS for your application. 4 | 5 | 1. Render your content with built-in components. 6 | 2. Query your content with a MongoDB-like API. 7 | 3. Use your Vue components in Markdown files with the MDC syntax. 8 | 4. Automatically generate your navigation. 9 | 10 | ## Installation 11 | 12 | Install the `@nuxt/content` module in your project: 13 | 14 | ```` 15 | yarn add --dev @nuxt/content 16 | ```` 17 | 18 | Then, add `@nuxt/content` to the `modules` section of `nuxt.config.ts`. 19 | 20 | ````ts 21 | export default defineNuxtConfig({ 22 | modules: [ 23 | '@nuxt/content' 24 | ], 25 | content: { 26 | // https://content.nuxtjs.org/api/configuration 27 | } 28 | }) 29 | 30 | ```` 31 | 32 | ## Create Content 33 | 34 | Place your markdown files inside the `content/` directory in the root directory of your project: 35 | ``content/index.md` 36 | 37 | ```` 38 | # Hello Content 39 | ```` 40 | 41 | The module automatically loads and parses them. 42 | 43 | ## Documentation 44 | 45 | Head over to https://content.nuxtjs.org to learn more about the Content module features, such as how to build queries and use Vue components in your Markdown files with the MDC syntax. -------------------------------------------------------------------------------- /components/library/ButtonNuxt.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | 33 | -------------------------------------------------------------------------------- /components/SplashScreen.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 43 | 44 | -------------------------------------------------------------------------------- /components/Switch.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 51 | -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 67 | -------------------------------------------------------------------------------- /components/library/MouseMove.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 38 | 39 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | const siteTitle = 'Nuxt 3 PWA Template' 2 | 3 | /* 4 | * Nuxt 3 Config File 5 | Usage: https://nuxt.com/docs/api/configuration/nuxt-config 6 | */ 7 | export default defineNuxtConfig({ 8 | 9 | /** 10 | * * App Config 11 | * app config: https://nuxt.com/docs/api/configuration/nuxt-config#app 12 | * head config: https://nuxt.com/docs/api/configuration/nuxt-config#head 13 | * meta config: https://nuxt.com/docs/getting-started/seo-meta 14 | * pageTransition config: https://nuxt.com/docs/getting-started/transitions#transitions 15 | * TODO: Add more meta tags for SEO 16 | * TODO: Add tags for social media sharing 17 | * TODO: Migrate apple-touch-icon config to manifest.json 18 | */ 19 | app: { 20 | head: { 21 | title: siteTitle, // App window nav title 22 | 23 | meta: [ 24 | { charset: 'utf-8' }, 25 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 26 | { name: 'theme-color', content: '#121212' }, 27 | // ... 28 | ], 29 | link: [ 30 | { rel: 'manifest', href: 'pwa/manifest.json' }, 31 | { rel: 'apple-touch-icon', href: 'pwa/icons/apple-touch-icon.png' }, 32 | ], 33 | }, 34 | pageTransition: { name: 'page', mode: 'out-in' } 35 | }, 36 | 37 | /** 38 | * * Nuxt 3 Modules 39 | * Official modules: https://nuxt.com/modules 40 | */ 41 | modules: [ 42 | 'nuxt-icon', 43 | '@nuxtjs/i18n', 44 | '@nuxt/content', 45 | '@nuxtjs/color-mode', 46 | '@nuxtjs/tailwindcss', 47 | ], 48 | 49 | components: { 50 | dirs: [ 51 | '~/components', 52 | '~/components/library' 53 | ], 54 | }, 55 | 56 | /** 57 | * * Tailwind CSS Config 58 | * Options: https://tailwindcss.nuxt.dev/getting-started/options/ 59 | * Docs: https://tailwindcss.nuxt.dev 60 | */ 61 | tailwindcss: { 62 | cssPath: '~/assets/tailwind.css', 63 | configPath: 'tailwind.config', 64 | exposeConfig: true, // true to resolve the tailwind config in runtime. https://tailwindcss.nuxt.dev/getting-started/options/#exposeconfig 65 | injectPosition: 0, 66 | viewer: true, // set up the /_tailwind/ route. (Disable in production) https://tailwindcss.nuxt.dev/getting-started/options/#viewer 67 | }, 68 | 69 | /** 70 | * * i18n Config 71 | * Official module: https://nuxt.com/modules/i18n 72 | */ 73 | i18n: { 74 | defaultLocale: 'en', 75 | detectBrowserLanguage: false, 76 | langDir: 'lang/', 77 | lazy: true, 78 | locales: [ 79 | { 80 | code: 'es', 81 | file: 'es.json', 82 | iso: 'es-ES', 83 | name: 'Español', 84 | }, 85 | { 86 | code: 'en', 87 | file: 'en.json', 88 | iso: 'en-US', 89 | name: 'English', 90 | }, 91 | ]}, 92 | 93 | /** 94 | * * Color mode Config 95 | * Official module: https://nuxt.com/modules/color-mode 96 | */ 97 | colorMode: { 98 | classSuffix: '', 99 | }, 100 | 101 | /** 102 | * * Runtime Config (Environment Variables) 103 | * Usage: https://nuxt.com/docs/guide/going-further/runtime-config 104 | */ 105 | runtimeConfig: { 106 | // The private keys which are only available server-side 107 | apiSecret: '123', 108 | // Keys within public are also exposed client-side 109 | public: { 110 | apiBase: '/api' 111 | } 112 | } 113 | }) 114 | -------------------------------------------------------------------------------- /content/manifest.json.md: -------------------------------------------------------------------------------- 1 | # Web App Manifest 2 | 3 | El manifiesto de aplicaciones web proporciona información sobre una aplicación (como nombre, autor, icono y descripción) en un documento simplificado. Su principal propósito es crear progressive web apps (en-US): aplicaciones web que se pueden instalar desde la pantalla principal de un dispositivo sin necesidad de hacerlo a traves de una app store (y otras ventajas como disponibilidad offline y enviar notificaciones push cuando cambia el contenido de la aplicación.) 4 | 5 | ## Interest Links 6 | 7 | - [Web.dev - Cómo agregar un manifiesto en la aplicación web](https://web.dev/add-manifest/?utm_source=devtools) 8 | 9 | - [Developer Mozilla - Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest) 10 | 11 | - [Progressier App](https://progressier.com/) 12 | 13 | - [Maskable App (To create maskable icons)](https://maskable.app/editor) 14 | 15 | - [Crear un manifiesto de aplicación de PWA dinámicamente](https://javascript.plainenglish.io/create-a-pwa-app-manifest-dynamically-3b3d45340b11) 16 | 17 | - [Web.dev - Aprende PWA](https://web.dev/learn/pwa/) 18 | 19 | - [Identificación única de PWA con la propiedad de identificación del manifiesto de la aplicación web (start_url)](https://developer.chrome.com/blog/pwa-manifest-id/?utm_source=devtools) 20 | 21 | - [Soporte de íconos adaptables en PWAs con íconos enmascarables (maskable icons)](https://web.dev/maskable-icon/?utm_source=devtools) 22 | 23 | - [¿Qué se necesita para que una Aplicación Web Progresiva sea buena? (PWA Checklist)](https://web.dev/pwa-checklist/) 24 | 25 | - [Service Worker Sample: Custom Offline Page Sample](https://googlechrome.github.io/samples/service-worker/custom-offline-page/) 26 | 27 | - [Google Lighthouse (Testing PWA)](https://developer.chrome.com/docs/lighthouse/) 28 | 29 | - [Using Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) 30 | 31 | - [ServiceWorker - Mozilla Dev](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker) 32 | 33 | - [Soporte de íconos adaptables en PWAs con íconos enmascarables](https://web.dev/maskable-icon/?utm_source=devtools) 34 | 35 | 36 | ## Full Template 37 | ````json 38 | { 39 | "name": "Nuxt PWA Template", 40 | "short_name": "Nuxt PWA", // Name of app at devide when installed. 41 | "description": "A awesome PWA template build with Nuxt", 42 | "start_url": "http://localhost:3000/", 43 | "display": "standalone", 44 | "orientation": "portrait", 45 | "background_color": "#121212", 46 | "theme_color": "#121212", 47 | "scope": "http://localhost:3000/", // Routes scope. Other urls will land the browser. 48 | "icons": [{ 49 | "src": "images/touch/homescreen48.png", 50 | "sizes": "48x48", 51 | "type": "image/png" 52 | }, { 53 | "src": "images/touch/homescreen72.png", 54 | "sizes": "72x72", 55 | "type": "image/png" 56 | }, { 57 | "src": "images/touch/homescreen96.png", 58 | "sizes": "96x96", 59 | "type": "image/png" 60 | }, { 61 | "src": "images/touch/homescreen144.png", 62 | "sizes": "144x144", 63 | "type": "image/png" 64 | }, { 65 | "src": "images/touch/homescreen168.png", 66 | "sizes": "168x168", 67 | "type": "image/png" 68 | }, { 69 | "src": "images/touch/homescreen192.png", 70 | "sizes": "192x192", 71 | "type": "image/png" 72 | }], 73 | "related_applications": [{ 74 | "platform": "web" 75 | }, { 76 | "platform": "play", 77 | "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched" 78 | }], 79 | "screenshots" : [ 80 | // These images are intended to be used by progressive web app stores. 81 | { 82 | "src": "screenshot1.webp", 83 | "sizes": "1280x720", 84 | "type": "image/webp", 85 | "platform": "wide", 86 | "label": "Homescreen of Awesome App" 87 | }, 88 | { 89 | "src": "screenshot2.webp", 90 | "sizes": "1280x720", 91 | "type": "image/webp", 92 | "platform": "wide", 93 | "label": "List of Awesome Resources available in Awesome App" 94 | } 95 | 96 | } 97 | ```` 98 | 99 | --- 100 | 101 | ### Keys 102 | 103 | [List of manifest.json keys](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json#list_of_manifest.json_keys) 104 | 105 | ## Options 106 | 107 | ### `background_color` 108 | Define el color de fondo deseado para la aplicación. Este valor repite lo definido en la hoja de estilos de la aplicación, pero puede ser utilizado por los navegadores para pintar el color de fondo de una app si el manifiesto está disponible antes de que la hoja de estilos se haya cargado. Esto suaviza la transición entre lanzar una aplicación y cargar el contenido de la misma. 109 | 110 | ````json 111 | "background_color": "red" 112 | ```` 113 | 114 | ### `description` 115 | 116 | Proporciona una descripción general sobre qué hace la aplicación. 117 | 118 | ````json 119 | "description": "The app that helps you find the best food in town!" 120 | ```` 121 | 122 | --------------------------------------------------------------------------------