Clash Royale CLAN TAG#URR8PPP

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:

.html

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

TransferHttpCacheModule

2 Answers
2

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

.html

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');

,


fetchTags

tags

nuxt generate

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

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.

index

entry

directory

routes

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

vue-cli

For example, I have these routes:

,

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

vue.config.js

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.

vue.config.js

pages

router

entry

main.js

index.html

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

<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.

filename

photography/index.html

photography

dist

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

dist

index.html

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

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.

about

photography

client

server

.html

nuxt generate

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.