How to integrate in Nuxt?

[fm-engage]

Hi,

I would love to use Nile in a Nuxt project, but how am I supposed to integrate Nile Auth in the project? I can see predefined auth components for Next but what about other frameworks?

[jrea]

Great question! I previously merged niledatabase/nile-js#876, which should help with this problem (@niledatabase/web 3.1.0-alpha.1), as it allows for Vue support.

I am currently working on v4: niledatabase/nile-js#879 to make it a lot easier to integrate non-react client side frameworks easier.

After I merge that, I'll be working on documenting Nuxt fully (similar to what I did for nextjs and remix)

One thing I've been wondering... for the build in components - specifically for nuxt -- is it acceptable to have a react dependency? I've gone back and forth on this a while now.

Feedback is appreciated on for Vue (with client side state management) v4 would look like:

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
import '@niledatabase/web/styles.css';
import '@niledatabase/web/SignUpForm';
import '@niledatabase/web/SignInForm';
import '@niledatabase/web/TenantSelector';
import '@niledatabase/web/SignOutButton';
import '@niledatabase/web/UserInfo';
import { getSession, auth as nileAuth, type ActiveSession, type PartialAuthorizer, type ListenerParams, type Authorizer } from '@niledatabase/web';



// Initialize auth as null and assign it later
const auth = ref<Authorizer | null>(null);
const params = ref<PartialAuthorizer>(null);
const isLoading = ref(true);
const session = ref<ActiveSession | null>(null);

// Listener to track auth state changes
function authListener({ key, next }: ListenerParams) {
  if (key === 'loading') {
    isLoading.value = next;
  }
  if (key === 'session') {
    session.value = next as ActiveSession | null;
  }
}

onMounted(async () => {
  // Initialize auth inside onMounted
  auth.value = nileAuth.configure({
    baseUrl: 'http://localhost:3040',
    init: { credentials: 'include' }
  });

  // Add listener only after auth is initialized
  if (auth.value) {
    auth.value.addListener(authListener);
    await getSession();
    // only pass a partial auth instance to components
    params.value = auth.value.sanitize();
  }
});

onUnmounted(() => {
  if (auth.value) {
    auth.value.removeListener(authListener);
  }
});
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <Suspense>
        <div>
          <div v-if="!isLoading" class="flex flex-col gap-4">
            <div v-if="session?.user" class="flex flex-col gap-4">
              <nile-user-info :auth="params" />
              <nile-tenant-selector :auth="params" />
              <nile-sign-out-button :auth="params" callback-url="http://localhost:5173" />
            </div>
            <div v-else>
              <nile-sign-up-form :auth="params" />
            </div>
              <nile-sign-in-form :auth="params" />
          </div>
        </div>
      </Suspense>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
</template>

[fm-engage]

Thanks for your fast reply! ideally I would want to customize those components fully so at the end I'll never personally use the default components, but if I had to I'd prefer a vue/nuxt native solution that don't rely on react

[jrea]

I figured as much. I also ran into some problems needing for the Web Components, which is no good, so I'll have to add full vue components, thanks for confirming that's the way to do it.

In the mean time, niledatabase/nile-js#880 should work ok for mapping the API endpoints, which will allow for something like:

app.vue

<script setup>
import { useFetch } from '#app';
onMounted(async () => {
  useFetch("/api/auth/csrf");
}) 
</script>

with an .env set for nuxt.

I'll be adding the same kind of thing I did for react (hooks + components) for max flexibility, based on shadcn-vue, again, just like react, so you can either use those and customize or just use them as a starting point.

[fm-engage]

Thanks! I'll try this when I come back to the project I'm working on, would love to see a detailed implementation guide + simple nuxt demo project