Giter VIP home page Giter VIP logo

fastify-nuxtjs's Introduction

fastify-nuxtjs

fastify-nuxtjs

npm version Dependencies npm downloads code style: prettier License: MIT CI workflow

Vue server side rendering support for Fastify with Nuxt.js Framework.

Install

Install with yarn:

yarn add fastify-nuxtjs nuxt

Install with npm:

npm install fastify-nuxtjs nuxt

Usage

Since Nuxt needs some time to be ready on the first launch, you must declare your routes inside the after callback, after you registered the plugin. The plugin will expose the api nuxt in Fastify that will handle the rendering for you.

const fastify = require('fastify')();

fastify.register(require('fastify-nuxtjs')).after(() => {
  fastify.nuxt('/hello');
});

fastify.listen(3000, (err) => {
  if (err) throw err;
  console.log('Server listening on http://localhost:3000');
});

All you server rendered pages must be saved in the folder pages, as you can see in the nuxt documentation.

<template>
  <HelloWorld />
</template>

If you need to handle the render part yourself, just pass a callback to nuxt:

fastify.nuxt('/hello', (app, req, reply) => {
  // your code
  // `app` is the Nuxt instance
  app.render(req.raw, reply.raw, '/hello', req.query, {});
});

Serve all routes from your pages/ folder

Using *:

const fastify = require('fastify')();

fastify.register(require('fastify-nuxtjs')).after(() => {
  fastify.nuxt('*');
});

Or import your generated routes.json from your .nuxt folder:

const nuxtRoutes = require('./.nuxt/routes.json');
const fastify = require('fastify')();

fastify.register(require('fastify-nuxtjs')).after(() => {
  nuxtRoutes.forEach((nuxtRoute) => {
    fastify.nuxt(nuxtRoute.path);
  });
});

Acknowledgements

Heavily inspired by fastify-nextjs

License

Licensed under MIT.

fastify-nuxtjs's People

Contributors

gomah avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

fastify-nuxtjs's Issues

Typescript

It could be better to recode the module in typescript for ts devs, so without that, we can't work correctly with the auto-completion... we need to keep element in the library end recode them in typscript.

nuxt typing error

I tried to use the fastify-nuxtjs project to make a web app, but an error occured with typescript:

Property 'nuxt' does not exist on type 'FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse, FastifyBaseLogger, FastifyTypeProviderDefault>'.ts(2339) "

So, there is the code i wrote:

import fastify, { FastifyError, FastifyInstance } from "fastify";

const app: FastifyInstance = fastify()

app.register(require("fastify-nuxtjs")).after(() => {
  
  app.nuxt("/hello");
});


app.listen(3000, (err: Error) => {
  if (err) throw err;
  console.log("Server listening on http://localhost:3000");
});

Typescript integration FastifyNuxtCallback

Hi,

Ran into this during typescript integration of this plugin. should we add

export type {FastifyNuxtCallback} ;

To the end of index.d.ts

So FastifyNuxtCallback can be used in other typescript files, instead of referring to it as any.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.