nuxt / nuxt/bridge

Documentation request - SPA (ssr:false) w/ axios setup

Open
#692 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
Dominant language
TypeScript
Stars
285
Forks
33
Avg merge
22h 38m
Merged PRs (30d)
3

Description

Environment
------------------------------
- Operating System: `Linux`
- Node Version:     `v14.19.0`
- Nuxt Version:     `2.16.0-27720022.54e852f`
- Nitro Version:    `0.5.4`
- Package Manager:  `yarn@1.22.19`
- Builder:          `webpack`
- User Config:      `env`, `bridge`, `ssr`, `srcDir`, `modern`, `build`, `vuetify`, `buildModules`, `head`, `plugins`, `loading`, `css`, `router`, `modules`, `axios`, `typescript`, `styleResources`, `serverHandlers`, `devServerHandlers`
- Runtime Modules:  `@pinia/nuxt@0.4.6`, `@nuxtjs/axios@5.13.6`
- Build Modules:    `()`, `@nuxtjs/style-resources@1.2.1`, `@nuxt/bridge@3.0.0-27747000.69db93e`
------------------------------
Reproduction

Migrating a Nuxt 2 project w/ ssr: false. Uses axios to communicate directly with an API hosted on a subdomain to the nuxt app. Set up nuxt bridge, with nitro:

  nitro: {
    preset: 'service-worker',
    output: {
      dir: '~~/dist',
      publicDir: '~~/dist',
      serverDir: '~~/dist'
    }
  },

Deploying with netlify.

Describe the bug

I believe this isn't a bug, just a lack of clear documentation on the subject. As I'm not using a nitro function in netlify, just deploying it as a service worker, it's unclear how requests to external resources like an API now work. What I'm seeing is every request goes through the service worker, and returns the base index.html of the app. What I expect is the request to go to whatever endpoint is being requested, although I'm not seeing how to achieve this in the docs anywhere.
I think it's a fairly common setup with nuxt 2 to build an SPA with axios in this way, so my request is to provide some documentation on how to migrate to or workaround whatever is happening with nitro's service worker, as I'm finding the mental model for this confusing compared to what I got used to.

Additional context

No response

Logs

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Nuxt Bridge and Nitro service-worker deployment documentation, focusing on the provided ssr:false, service-worker preset, and Netlify setup. Reproduce how external API requests are handled and document the migration or workaround; done means the request routing and deployment behavior are clear for this SPA setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs
Domain
documentation, web-dev
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.