Discuss with Atinux Demo of using Nuxt 3 with GitHub authentication and creating issues with real-time updates.

Related tags

Nuxt discuss
Overview

Discuss with Atinux

Demo of using Nuxt 3 with GitHub authentication and creating issues with real-time updates.

Screenshot 2021-11-23 at 12 03 19

See it live on https://discuss.atinux.com

Setup

Make sure to install the dependencies

yarn install

And copy the .env.example to .env

cp .env.example .env

GitHub

Create a GitHub OAuth application and make sure to set:

Fill your .env with GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET variables .

Pipedream

This add the live events when issues are created or updated.

  1. Make sure to have an account on Pipedream.
  2. Duplicate this workflow
  • Setup the Oauth with your GitHub account
  • Select your repository
  1. Retrieve your workflow's event stream URL

Fill the ISSUES_SSE_URL variable in the .env with it.

Url should be similar to http://sdk.m.pipedream.net/pipelines/[YOUR WORKFLOW ID]/sse

Development

Start the development server on http://localhost:3000

yarn dev

Production

Build the application for production:

yarn build

Checkout the deployment documentation.

You might also like...
An application / authentication starter kit frontend in Nuxt3 for Laravel Breeze.

Laravel Breeze - Nuxt3 Edition ­čĆŁ´ŞĆ Introduction Based on the work made at breeze-next This repository is an implementation of the Laravel Breeze appli

The Weather project displays information using the API, written using NUXT.js
The Weather project displays information using the API, written using NUXT.js

The Weather project displays information using the API. Among the important points of the seven-day information are three different cities. This project modeled on a shot in dribbble written using NUXT.js

A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.
A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

­čľ╝Portfolio built with Nuxt and Nuxt Content

­čľ╝Portfolio built with Nuxt and Nuxt Content

A webpack loader i18n solution for Vue (Nuxt) with auto generated keysA webpack loader i18n solution for Vue (Nuxt) with auto generated keys

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

A simple nuxt renderless component wrapper around nuxt fetch capabilities

Nuxt Fetch Component A simple nuxt renderless component wrapper around nuxt fetc

Nuxt basic - Simple Nuxt.js project

nuxt_basic Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launc

Fcl-nuxt-starter - FCL plugin + full stack Nuxt application starter template
Fcl-nuxt-starter - FCL plugin + full stack Nuxt application starter template

How to use the Flow Client Library (FCL) with Nuxt Access the FCL instance from

Comments
  • Update dependencies of the demo

    Update dependencies of the demo

    Hello @Atinux seems that the error we have been talking only happens if I use npm instead of yarn, not sure why but with yarn all the updated dependencies work fine :)

    Thanks for the demo!

    opened by CKGrafico 1
  • refactor: small composable units

    refactor: small composable units

    • Expose smaller composable units useGithubUser/githubLogin/githubLogout
    • Directly use await useGithubUser() in User component
    • Add process.client guards to ensure login/logout won't be called in server-side
    • Use a normal cookie. The current version is using httpOnly + useState which is breaking httpOnly purpose that is to make token inaccessible in client javascript while adding to payload via useState, allows someone to still access token:
    image

    For the record i've made few refactors for proper httpOnly implementation but since it essentially requires moving all logic to /api routes and proxy github API, was adding to much logic that looses purpose of this demo I guess.


    ~~To fix before being mergable: nuxtApp context in being lost in client-side. (https://github.com/nuxt/framework/pull/2114)~~

    I've discovered a few detection problems with auto-imports (export async function not being detected). Using export function instead of export const for composables allows defining them by any order. Also we cannot directly use auto imports in template unless referenced from <script setup> SFC one hence we have const logout = githubLogout as a workaround (failing test added https://github.com/unjs/mlly/commit/2a584fc67c38a5269cbfd6d94b07bd7ef0ace75f) /cc @antfu

    opened by pi0 1
Owner
S├ębastien Chopin
Co-author of @nuxt and @nuxtlabs
S├ębastien Chopin
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 16 Dec 30, 2022
Github'st Development Archive Application using vue and nuxt

cat-hub Github'st Development Archive Application using vue and nuxt. Link You can check here. Tech and libraries vue vuex vuetify sass nuxt nuxt/cont

Lee Sang Min 5 Nov 22, 2022
An application / authentication starter kit frontend in Nuxt.js for Laravel Breeze.

Laravel Breeze - Nuxt.js Edition Inspiration This project was heavily inspired by the Breeze Next.js project. Have fun! Introduction This repository i

Filip 61 Jan 3, 2023
Build a full-blown jamstack blog with Nuxt 3, Storyblok and Tailwind CSS demo repo

Nuxt 3 Minimal Starter Look at the nuxt 3 documentation to learn more. Setup Make sure to install the dependencies: # yarn yarn install # npm npm ins

Dawntraoz Storyblok 6 Nov 17, 2022
Demo showing off ISG in Nuxt.js with Layer0

Static Medium: [ISG in Nuxt.js with Layer0] A demo showing off ISG (Incremental Static Generation) with Nuxt.js and Layer0 Demo https://rishi-raj-jain

Rishi Raj Jain 37 Oct 29, 2022
A demo deployment of Nuxt.js app to Layer0

Deploy Nuxt.js example to Layer0 A demo deployment of Nuxt.js app to Layer0. Demo https://layer0-docs-layer0-nuxt-example-default.layer0.link/ Try It

null 0 Dec 31, 2021
A demo on @nuxt/image

nuxt-image-demo Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and

Yann Bertrand 1 Dec 4, 2021
This is nuxt invoice app using nuxt.js and firebase

Nuxt Invoice App Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and

Moein Salari 8 Dec 20, 2022
A convenient replacement for component when using nuxt-i18n

nuxt-i18n-link A convenient replacement for <nuxt-link> component when using nuxt-i18n. It is simply a replacement for this exact code: <nuxt-link :to

iBlueDust 1 May 25, 2021
English-quiz-nuxt - An english quiz using nuxt

english-quiz-nuxt Live demo here Build Setup # install dependencies $ yarn insta

Leonid Gainar 2 Feb 17, 2022