{"id":14964276,"url":"https://github.com/dulnan/nuxt-multi-cache","last_synced_at":"2025-05-15T05:07:57.103Z","repository":{"id":65552296,"uuid":"334407523","full_name":"dulnan/nuxt-multi-cache","owner":"dulnan","description":"Advanced caching of components, routes and data for Nuxt 3. Dynamically define CDN cache control headers. Provides cache management API for purging items by key or using cache tags.","archived":false,"fork":false,"pushed_at":"2025-04-28T07:07:40.000Z","size":2633,"stargazers_count":259,"open_issues_count":11,"forks_count":21,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-13T13:13:47.368Z","etag":null,"topics":["cache","nuxt","nuxt-module","nuxt3","nuxtjs","performance","ssr","vue"],"latest_commit_sha":null,"homepage":"https://nuxt-multi-cache.dulnan.net","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dulnan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-01-30T12:28:44.000Z","updated_at":"2025-05-05T09:47:59.000Z","dependencies_parsed_at":"2024-08-25T08:33:13.607Z","dependency_job_id":"daba25f5-5ffd-45f7-9793-be81268545cf","html_url":"https://github.com/dulnan/nuxt-multi-cache","commit_stats":{"total_commits":159,"total_committers":11,"mean_commits":"14.454545454545455","dds":0.1572327044025157,"last_synced_commit":"f7991bd81921af5234a642ef180334db0c0cda42"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fnuxt-multi-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fnuxt-multi-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fnuxt-multi-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fnuxt-multi-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dulnan","download_url":"https://codeload.github.com/dulnan/nuxt-multi-cache/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cache","nuxt","nuxt-module","nuxt3","nuxtjs","performance","ssr","vue"],"created_at":"2024-09-24T13:32:55.065Z","updated_at":"2025-05-15T05:07:52.096Z","avatar_url":"https://github.com/dulnan.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![nuxt-multi-cache banner](./docs/public/banner.jpg?raw=true 'nuxt-multi-cache for Nuxt 3')\n\n# Nuxt Multi Cache for Nuxt 3\n\nThis module provides several layers of server-side caching for your Nuxt 3 app:\n\n- SSR component caching (caches rendered markup of a component)\n- Route caching (pages, API routes)\n- Data Caching (generic cache for anything)\n- CDN cache control headers (e.g. Cloudflare, Fastly, Varnish)\n- API for cache management\n- Cache tag based invalidation\n\n**[Documentation](https://nuxt-multi-cache.dulnan.net)** -\n**[NPM](https://www.npmjs.com/package/nuxt-multi-cache)**\n\n## Nuxt 2\n\n[Version 1.x](https://github.com/dulnan/nuxt-multi-cache/tree/1.x) (which is in\nmaintenance mode) supports Nuxt 2.\n\n## Why?\n\nDoes your Nuxt app serve thousands of pages from a CMS? Does it have tens of\nthousands of requests per day? Does the data change frequently? Does rendering a\nsingle page require fetching data from multiple APIs? If you've answered any of\nthese questions with \"yes\", then this module might be for you.\n\nI work fulltime on building frontends with Nuxt for large CMS sites. Rendering a\nsingle page might require up to 10 API calls to get all the data: Menu, footer,\ntranslations, route, page data, user state, additional data... It all adds up\nand doing that for every request can quickly become a bottleneck. Maybe you can\nwork around this problem by getting all the data in a single API call, but I\ndidn't like to have components dependent on global state.\n\nInstead my solution was to cache the API responses locally on the server. Either\nfor a fixed amount of time, like 5 minutes, or until the cache entry is being\ninvalidated. In addition, I cache components that appear on most pages, like\nmenu or footer.\n\nThe hardest thing in IT is cache invalidation, so I also added a way to\ninvalidate cache entries by key or using cache tags.\n\n# Features\n\n## Component caching\n\nUse the `\u003cRenderCacheable\u003e` wrapper component to cache the markup of the default\nslot:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cRenderCacheable cache-key=\"navbar_de\" :max-age=\"3600\"\u003e\n      \u003cNavbar /\u003e\n    \u003c/RenderCacheable\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe component is only rendered once and its markup cached. Afterwards the markup\nis directly returned.\n\n## Route caching\n\nCache rendered pages or custom API responses:\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nuseRouteCache((route) =\u003e {\n  // Mark the page as cacheable for 1 hour and add a cache tag.\n  route.setCacheable().setMaxAge(3600).addTags(['page:2'])\n})\n\u003c/script\u003e\n```\n\n## CDN cache control headers\n\nManage the cacheability for the current response. This will set the correct\ncache control and cache tags headers for Cloudflare, Fastly and other cache\nproviders:\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nuseCDNHeaders((helper) =\u003e {\n  helper\n    .public()\n    .setNumeric('maxAge', 3600)\n    .setNumeric('staleWhileRevalidate', 21600)\n    .set('mustRevalidate', true)\n    .addTags(['page:2', 'image:342'])\n})\n\u003c/script\u003e\n```\n\nThe state is managed inside the current request and can be changed for the\nentire duration of the request. The headers are generated right before the\nresponse is sent.\n\n## API\n\nThe optional API provides endpoints to manage the caches.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulnan%2Fnuxt-multi-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulnan%2Fnuxt-multi-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulnan%2Fnuxt-multi-cache/lists"}