CODEWITHSUNDEEP
vue.jsnuxt.js
Duy Anh
Duy Anh

Reputation: 770

How to generate 100% Static website with Nuxt.js without API request?

I am testing around with Nuxt.js to generate a static website.

Is it possible to generate a 100% static site when using an API to fetch data, so that one can get rid of the API and requests?

Based on my tests so far that all the files are generated properly and being hosted on the Github Pages and can be reached, except:

  1. When hitting the pages directly via URL bar, no error (expected behavior)
  2. When navigating to the pages via routes, the pages is still sending the request to API (does not exist outside local machine), even though the data has already been fetched and the .html file is generated with the data already during the generate process.

Using asyncData to get the data for the components from the API.

Upvotes: 6

Views: 5492

Answers (2)

Duy Anh
Duy Anh

Reputation: 770

The solution was to use vuex (state management) and populate the state with the data during the generation process.

The state will be already populated in the generated .html file

For more information please refer to the this thread where it is being discussed.

Example:

async fetch({ store }) {
  if (_.isEmpty(store.getters['tags/getTags'])) {
    await store.dispatch('tags/fetchTags');
  }
},
  • The fetch method is used to fill the store before rendering the page
  • fetchTags is the actions making a request to api and populate the state
  • The logic is quite simple: if the tags state is not already populated, then populate it by making a request to an api
  • When running nuxt generate the state will be populated for the deployment, hence to api request won't be sent
  • The state will be injected into the .html file (pic below for reference)

state example populate in the .html file

If anyone have a better solution, please share, I will gladly accept that answer as a correct one :)

Upvotes: 3

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3719

There is a trick to make your routes accessible via directly entering the url into the address bar if you are hosting your site in github pages. You just need to configure your webpack to generate multiple index files with the same entry point that will be stored in each directory based on your routes.

This is easily achieved if you are using vue-cli to generate your project.

For example, I have these routes:

enter image description here,

I just need to create a vue.config.js in the root of my project.

enter image description here

and inside the vue.config.js file, I just need to register several more pages based on what's on my router. Each entry point should be your main.js file, and the template should be your index.html.

The filename should be <your-route>/index.html

If you entered sub-directory into the filename, Vue will automatically create those directories if they don't exist during compilation. So if the filename you entered is photography/index.html, Vue will automatically create a photography directory inside the dist directory.

enter image description here

And if you check your dist directory, you will see the directories with an index.html inside.

enter image description here

So when you enter your route into the address bar, it will actually access one of these directories and display the index.html.

This is what I actually did to my homepage which I hosted in my github account.

Here's my github page: https://wisdomsky.github.io/

I have two pages the about and photography and if you will enter https://wisdomsky.github.io/photography into the address bar, it will render my photography page instead of receiving the Github 404 page.

Upvotes: 0

Related Questions