nuxt-community/hapi-nuxt

Nuxt.js plugin for Hapi.js

Hapi Plugin for Nuxt.js

Nuxt.js plugin for Hapi.js

IMPORTANT: This plugin is compatible with Hapi >= 17

Setup

1. Add @nuxtjs/hapi dependency to your project

yarn add @nuxtjs/hapi # or npm install @nuxtjs/hapi

2. Register it on your server:

const Hapi = require('@hapi/hapi')
const nuxtPlugin = require('@nuxtjs/hapi')

await server.register({
  plugin: nuxtPlugin
  options: {
    // plugin options
  }
}

Options

dev

• Default: true (false when environment variable NODE_ENV is production)

Automatically starts a Builder allow to hot reload on dev. Should be disabled for production.

overrides

Override nuxt.config

rootDir

• Default: current working directory

Nuxt app rootDir

edge

• Default: false

Use nuxt-edge instead of nuxt package if set to true

baseURL

• Default: /

baseURL for SSR route handler

route

• Default: { id: 'nuxt.render', auth: false }

Hapi route options for SSR handler

routeMethod

• Default: *

Hapi route method. (Can be set to GET for more strict handling)

Access nuxt and builder instances

This plugin exposes nuxt and builder (for dev only) instances to hapi.

const server = new Hapi.Server()

await server.register(HapiNuxt)

// Access to nuxt and builder instances using server.plugins.nuxt
const { nuxt, builder } = server.plugins.nuxt

Access Hapi's internals.

The hapi request object is available from nuxtServerInit and the context under res.hapi. Likewise, the hapi response toolkit will be available in res.hapi.

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community

hapi-nuxt's Issues

Loading nuxt.config.js file bug

Nuxtjs is ignoring my custom configuration of the nuxt.config.js in my project directory. Only in development mode but it is working just fine on production mode.

await server.register({
  plugin: nuxtPlugin,
  options: {
    dev: true,
    rootDir: __dirname
  }
});

Here a simple reproduce of my issue: https://github.com/the94air/nuxt-hapi

Debugging hapi-nuxt

I am trying to debug some code which is in...
.nuxt/index.js
which I believe is compiled from...
node_modules/hapi-nuxt/example/.nuxt/index.js (among other sources)
but even if I place a debugger in the latter file, there is still no debugger when I'm running the server.
So I believe that the latter file is in itself being compiled from another file. Where do I need to put a debugger in order for this to be rendered when I run the server?

Looking for someone to help with a one month project related to Hapi+Nuxt

Hi all, and apologies in advance if this is deemed off-topic or inappropriate.

But my company is looking to hire an engineer who can help us take our existing Hapi+Handlebars site and add some new functionality and views using Nuxt. We are based in Europe and would ideally like to work with someone close to our time zone. The immediate need is for a one month contract, but we are looking to hire fulltime permanent as well for the right person. I figured this was the right audience of people with the specific skillset we need :)

Thanks all!

Support hapi v17.

The latest version is v17, PLZ upgrade the plugin.

_{This question is available on Nuxt.js community (#c6)}

Add nuxt base url option

I would like to add the ability to set a default url to use nuxt on a Hapi route.
I think it is necessary to utilize the modularization function of Hapi.

_{This question is available on Nuxt community (#c12)}

Compatibility with Nuxt 3 (@nuxtjs/hapi)

Hello,
I was going to ask if for this library @nuxtjs/hapi, is there a version compatible with node 18 and Nuxt 3, as we are performing a migration of an app which uses hapi and nuxt 3 in the same repo (and deployed in the same server).

Thank you in advance if you could clarify this point,
and if it is not compatible, which would it be the most suitable replacement for it.

thank you,

Kind regards

Carlota

Run CircleCI on PRs

What problem does this feature solve?

Run CircleCI on PRs

_{This feature request is available on Nuxt community (#c18)}

Add base url setting

What problem does this feature solve?

It is distinguished from the URLs registered in other hapi modules.

What does the proposed changes look like?

I would like to add the ability to set a default url to use nuxt on a Hapi route.
I think it is necessary to utilize the modularization function of Hapi.

_{This feature request is available on Nuxt community (#c13)}

please support typescript

May I ask
Do you have a plan to support typescript, as follows code :

<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class PageIndex extends Vue {
  message: string = 'This is a message'
}
</script>

_{This question is available on Nuxt community (#c21)}

redirect's not working in SSR

Thanks for the effort!

Got this up and running with your latest release, only one bug so far, the redirect isn't doing anything in the server side render. For instance, a super simple Nuxt middleware might look like this:-

export default function ({ store, route, redirect, error }) {
if (!store.state.user.authenticated && route.path !== '/login') {
return redirect('/login')
}
}

However, though i get a 302 header back from the server when the server runs that and wants to redirect, it doesn't include the HTTP Location header, any ideas?

_{This question is available on Nuxt.js community (#c2)}

What about sessions

Tried to get sessions working with hapi-server-session but it seens to not are sent to nuxtServerInit
This is my server.js

const {Server} = require('hapi');
const hapiNuxt = require('hapi-nuxt'); // 'hapi-nuxt'

async function start() {
    const server = new Server({port: 3000});
    await server.register(hapiNuxt);
    await server.register({
        plugin: require('hapi-server-session'),
        options: {
            cookie: {
                isSecure: false, // never set to false in production
            },
        },
    });

    server.route({
        method: 'POST',
        path: '/ssd',
        handler: function (req, h) {
            req.session.ssd = req.payload.ssd;
            return {
                ok: true,
                ssd: req.session.ssd
            }
        }

    });

    await server.start();

    console.log(`Hapi server listening on http://localhost:3000`);
}

start().catch(console.error);

And at my store/index.js:

        nuxtServerInit({state, commit}, {req}) {
            if (req.session && req.session.ssd) {
                commit('restoreState', req.session.ssd)
            }
        },

with console.log(req.session) receiving undefined

tailwindcss-module isnt compatible

Version

v3.0.0

Reproduction link

https://codesandbox.io/s/quirky-rgb-v8jlr?file=/server.js

Steps to reproduce

yarn nuxt

Runs and renders correctly loading tailwindcss module and everything works fine

node server.js

Runs and purges all tailwindcss and ignoring the config files.

What is expected ?

yarn nuxt renders the tailwind without a problem

node server.js compiles and runs

What is actually happening?

both should have the same behaviour as it is a plugin that shouldnt require any extra config

_{This bug report is available on Nuxt community (#c22)}

hapi nuxt axios proxy only support get method

when i use nuxtjs/axios add proxy for api in nuxt.conf, i find the get method is ok,but others like post、put、delete... all return 404

_{This question is available on Nuxt community (#c11)}

Running in production

I'm trying to deploy my Nuxt + Hapi code in production on a Nginx server, but if I run nuxt build then nuxt start when Axios hits the Hapi server apis there are just 401 codes as if it can't find the server.

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "nuxt start"
  },

The only way I seem to get this to work is to run the following code but i'm not sure if this is the correct setup. The .nuxt/dist/server file uses server.js as the main file, surely the code below is just running my dev code in production mode?

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js"
  },

_{This question is available on Nuxt community (#c20)}

Can't use nuxt-edge because 'nuxt' is being imported

This might be a moot point in the near future when Nuxt2 is released, but for now users of hapi-nuxt can no use nuxt-edge because 'nuxt' is being imported on this line:

hapi-nuxt/src/index.js

Line 2 in eabb593

const { Nuxt, Builder } = require('nuxt')

_{This question is available on Nuxt community (#c9)}

Audience for plugin and is this now deprecated?

Really pleased to see this plugin as Hapi.js has to be one of, if not the most secure & manageable HTTP frameworks out there but I have 2 questions:

1. I was a little confused to see this comment from @pi0 in July 2020 saying it was deprecated. Why is that? Is there a new plugin/interface or is Nuxt.js moving away from framework integrations?
2. Some of hapi's strengths is it's payload validation & authentication, so why disable it? If I'm understanding this plugin correctly it creates a catch-all route mostly by-passing hapi configuration & forwards on to the Nuxt renderer. Which makes me wonder, is there a specific setup this plugin is designed for?

Thanks in advance.

[question] loading-screen & websockets

The loading-screen cannot connect to WebSockets when running on Hapi.

WebSocket connection to 'ws://localhost:3000/_loading/ws' failed: Invalid frame header

Adding the nes plugin (https://github.com/hapijs/nes) solves the problem, but then it cannot resolve async components

[Vue warn]: Failed to resolve async component: function desktop() {
      return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./movies-desktop.vue */ "./client/pages/movies/movies-desktop.vue"));
    }
Reason: TypeError: Cannot read property 'call' of undefined

Any idea?

_{This question is available on Nuxt community (#c14)}

Run CircleCI on PRs

_{This question is available on Nuxt community (#c17)}

Can't use nuxt-edge because 'nuxt' is being imported

Version

1.0.1

Reproduction link

hapi-nuxt/src/index.js

Line 2 in eabb593

const { Nuxt, Builder } = require('nuxt')

Steps to reproduce

This might be a moot point in the near future when Nuxt2 is released, but for now users of hapi-nuxt can no use nuxt-edge because 'nuxt' is being imported on this line:

hapi-nuxt/src/index.js

Line 2 in eabb593

const { Nuxt, Builder } = require('nuxt')

What is expected ?

To be able to use nuxt-edge

What is actually happening?

Cant use nuxt-edge because 'nuxt' is being imported

_{This bug report is available on Nuxt community (#c10)}

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

This repository currently has no open or pending branches.

Detected dependencies

circleci

.circleci/config.yml

npm

package.json

---

• Check this box to trigger a request for Renovate to run again on this repository

What are the difference between this plugin as opposed to just plug hapi like in the express template ?

Nervemind.

_{This question is available on Nuxt.js community (#c4)}

Pin exact versions

Semver is picking up rc-3 instead of alpha-3. This is an issue since the alpha-3 code in this repo is not compatible with nuxt rc-3. Thanks!

_{This question is available on Nuxt.js community (#c5)}

hapi: This package has been deprecated

according to https://www.npmjs.com/package/hapi:

This package has been deprecated
Author message:

This module has moved and is now available at @hapi/hapi. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.

maybe we should update the hapi dependency in package.json to @hapi/hapi, otherwise there will be many warnings during npm install.

_{This question is available on Nuxt community (#c15)}

options proposal

Pass only required properties

  await server.register({
    plugin: HapiNuxt,
    options: {
      // path: '../../nuxt.config.js',
      dev: !(process.env.NODE_ENV === 'production')
    }
  })

  async register(server, options = {}) {
    // If options.path is not provided try nuxt.config.js
    if (!options.path) {
      options.path = 'nuxt.config.js'
    }

    // Resolve config location if is provided as string
    if (typeof options.path === 'string') {
      try {
        const path = resolve(process.cwd(), options.path)
        config = require(path)
      } catch (e) {
        // DO NOTHING
      }
    }

    delete options.path
    Object.assign(config, options)

     ...

_{This question is available on Nuxt.js community (#c7)}

Some tutorial?

Can u write some tutorial how to connect Hapi with Nuxt using this?

_{This question is available on Nuxt.js community (#c1)}

Feature: Prevent re compiling on dev mode when server file changes

Every time i change a file inside my server folder whole package runs in dev mode and recompiles. I'm using nodemon to start my app.

I appreciate any suggestions.

Thanks for this awesome plugin.

_{This question is available on Nuxt community (#c16)}

Can we get a tutorial? I would be willing to help write it.

Hi. Thank you for creating this plugin. I have been trying to figure out how to connect hapi.js and Vue.js for awhile now and I came across this plugin recently.

I am trying to get this plugin to work with a hapi.js project that I am working on, but I keep getting errors. I am sure that I have some errors with my configs, but I don't know where I am going wrong. A tutorial would be much appreciated. I would be willing to help write it with your direction.

Please let me know what I can do to help and I would be glad to contribute.

Thank you!

_{This question is available on Nuxt.js community (#c3)}