Cannot visit page directly in Nuxt SPA

Question

I'm using Nuxt 2.3.4. I am using vue-apollo to query data for a pages/_.vue file to dynamically handle content. According to this page, this is the way to have dynamically nested routes. Everything works locally. However, when I copy my /dist folder, after running yarn run build, to my hosting server, I get a 404 error when I attempt to visit any pages other than / directly (e.g., https://mysite.whatever/someurl/somenestedUrl).

Based on the nuxt router configuration docs I have configured my nuxt.config.js to have the following setting:

/*
** Router
*/
router: {
    routeNameSplitter: '/'
},

Perhaps I need to configure my server nginx .conf file to handle these urls?

The below snippet is my pages/_.vue file.

<template>
  <v-container v-if="!$apollo.loading && page">
    <v-layout>
      <v-flex
        xs12
        md9
      >
        <h2>{{ page.title }}</h2>
        <div v-html="page.content" />
      </v-flex>
      <v-flex
        id="sidebar"
        class="hidden-md-and-down"
        xs3
      >
        <h1>Sidebar</h1>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as R from 'ramda'
import gql from 'graphql-tag'

export default {
  name: 'Page',
  apollo: {
    page: {
      query: gql`
        query GetPageByUri($uri: String!) {
          pageBy(uri: $uri) {
            id
            pageId
            title
            date
            uri
            content
          }
        }
      `,
      variables() {
        return {
          uri: this.$route.params.pathMatch
        }
      },
      result({ data, loading, networkStatus }) {
        if (R.isEmpty(data)) return this.$router.replace('/404')
      },
      update(data) {
        return data.pageBy
      }
    }
  }
}
</script>

Aldarund Aldarund · Accepted Answer · 2019-03-03T09:50:34

If you are using ssr mode then u need to start nuxt server on server e.g. nuxt start and downstream from nginx to nuxt server. Example config could be found in docs

If you are using SPA mode then you need redirect all queries to index.html via nginx like in this example https://github.com/steebchen/nginx-spa/blob/master/nginx.conf

Cannot visit page directly in Nuxt SPA

1 Answers