Connector for Nuxt Bridge

Issues
,
1

Summary: How do I get Nuxt Bridge (Nuxt 3-ish) project deployed on layer0?

I am new to layer0 and am investigating hosting solutions for a series of projects coming this year for one of our clients. This project will be riding on nuxt 3 and so currently we are using nuxt 2 + bridge for some early tests. However, I can’t seem to get the site to deploy because it’s looking for module “nuxt” and with Bridge configuration the package is called “nuxt-edge”.

No idea if it’s easy for me to get this up or we will just have to wait for a layer0 connector for bridge and nuxt 3 but any guidance would be appreciated.

2 Likes
2

We have a nuxt3 connector that is released or imminent, with nuxt-bridge coming sometime after that. Will have someone get back to you.

1 Like
3

Hi @dolbex . We have a Nuxt3 connector available here layer0-connectors/layer0-nuxt3-connector at main · layer0-docs/layer0-connectors · GitHub. And we are also working on the Nuxt Bridge connector.

In the meantime, to run your Nuxt Bridge app, have you seen the guide on Connectors?

1 Like
4

Hey @dolbex, I’ve wrote a custom connector in the deployable example: GitHub - rishi-raj-jain/layer0-nitro-example: A demo showing off Nitro with Layer0.

The following implement the custom connector:

As for utilising the benefits of caching, refer to Layer0 Documentation - Caching.

1 Like
5

Thanks everyone for your help jumping in. I will definitely give the resources provided a read and tinker some more - would love to make Layer0 our home for this project. @rishi-raj-jain - Big thanks for your work and presentations with ISG on Nuxt - you are the reason our head turned this direction. Great stuff, well covered.

2 Likes
6

That’s great to hear @dolbex, excited to see your projects on Layer0!

Ah man you flatter me :blush:, thanks a lot for the great feedback :yum:
ISG is just crazy powerful.

1 Like
7

@dolbex Quick update on Nuxt 3 with Layer0

Working example link: https://rishi-raj-jain-layer0-nuxt3-example-default.layer0-limelight.link/
GitHub: GitHub - rishi-raj-jain/nuxt3-layer0

Steps to install it:

Steps to run it:

  • 0 dev (or npm run 0:dev)
  • 0 build (or npm run 0:build)
  • 0 run -p (or npm run 0:prod)
  • 0 deploy (or npm run 0:deploy)

Spinned up a connector for you by following: Connectors | Layer0 Documentation.

  • In layer0/prod.js: I just load the node-server as generated by Nitro
  • In layer0/dev.js: I run npm run dev which invokes nuxt dev
  • In layer0/build.js: I build the Nuxt 3 project with npm run build which invokes nuxt build. Then I add the respective folders to work on serverless or static storage. Further, I create set of routes from the folder .output/public so that these are automatically cached with Layer0, and you can freely set the config of these public assets in routes.js

Overall at the time of writing, you can just clone this, and continue to develop like a Nuxt 3 app, all is handled to work with Layer0.

8

Nuxt including a smart prefetching which means it can detect when link is visible even in the viewport or when you are scrolling or prefetching the the java for those scripts. they are almost ready when when user click the links.