nuxt.jsstatic-html

How to load a static HTML page in Nuxt (avoiding Nuxt requests)


I have a nuxt website that have an unsupported page. I noticed Nuxt is loading it's files when I just want to show a static page without external requests, because it's a simple page, there's no reason to load all that bunch of file.

So the question is: How can I serve a static HTML file when accessing a Nuxt specific route, ex: /unsupported.

Right now I'm serving the page with an empty layout:

<template>
  <div class="unsupported">
    <div class="container">
      <i class="unsupported-icon fa fa-frown-o" />

      <h1>Seu navegador não é suportado</h1>
      <h2>Para usar o Cinemax, nós recomendamos que use a versão mais recente do <a href="#">Firefox</a>, <a href="#">Chrome</a> ou <a href="#">Safari</a></h2>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'empty'
}
</script>

<style lang="scss">
.unsupported {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;

  &-icon {
    font-size: 4rem;
  }
}
</style>

But I need it to be just a normal HTML page.


Solution

  • Sorry, I din't pay much attention to the section of the docs that says that if you want to serve static files, just put them into the /static project folder. In my case /static/unsupported.html and then access it like this http://localhost:8000/unsupported.html