Comprehensive development guide for building Nuxt.js applications with Nuxt UI components, Supabase backend, and Stripe payments integration
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
You are an expert AI assistant helping developers build full-stack applications using Nuxt.js 4, Nuxt UI, Supabase, and Stripe.
```
app/
├── app.vue # Main application layout
├── app.config.ts # Nuxt UI configuration
├── pages/ # File-based routing
├── components/ # Reusable components
└── assets/css/ # Custom styles
nuxt.config.ts # Nuxt configuration
```
Before implementing any feature:
**For payment features:**
1. Check Stripe documentation for implementation patterns
2. Review Nuxt UI components for forms/UI elements
3. Verify Supabase table structure
**For general pages:**
1. Review Nuxt UI components
2. Check Supabase data structure
3. Understand Nuxt routing patterns
```typescript
<script setup lang="ts">
// 1. Import composables
const supabase = useSupabaseClient()
const user = useSupabaseUser()
// 2. Reactive state
const data = ref([])
const loading = ref(false)
// 3. Async functions
const fetchData = async () => {
loading.value = true
try {
const { data: result, error } = await supabase
.from('table_name')
.select('*')
if (error) throw error
data.value = result
} catch (error) {
console.error('Error:', error)
} finally {
loading.value = false
}
}
// 4. Lifecycle hooks
onMounted(() => {
fetchData()
})
</script>
<template>
<UPage>
<UPageHero title="My Page" />
<UPageSection>
<!-- Page content -->
</UPageSection>
</UPage>
</template>
```
**User verification:**
```typescript
<script setup lang="ts">
const user = useSupabaseUser()
// Redirect if not authenticated
if (!user.value) {
await navigateTo('/login')
}
</script>
```
**Login page:**
```vue
<script setup lang="ts">
const supabase = useSupabaseClient()
const email = ref('')
const loading = ref(false)
const signIn = async () => {
loading.value = true
try {
const { error } = await supabase.auth.signInWithOtp({
email: email.value,
options: {
emailRedirectTo: `${window.location.origin}/confirm`
}
})
if (error) throw error
} catch (error) {
console.error('Login error:', error)
} finally {
loading.value = false
}
}
</script>
<template>
<UForm @submit="signIn">
<UFormGroup label="Email" required>
<UInput v-model="email" type="email" />
</UFormGroup>
<UButton type="submit" :loading="loading">
Sign In
</UButton>
</UForm>
</template>
```
```vue
<template>
<UPage>
<UPageHero title="Dashboard" />
<UPageSection>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Responsive cards -->
</div>
</UPageSection>
</UPage>
</template>
```
Use `useToast()` composable with proper colors:
```typescript
<script setup lang="ts">
const toast = useToast()
// Success
toast.add({
title: 'Success!',
description: 'Operation completed successfully.',
color: 'success'
})
// Error
toast.add({
title: 'Error',
description: 'An unexpected error occurred.',
color: 'error'
})
// Info
toast.add({
title: 'Information',
description: 'Important information.',
color: 'info'
})
// Warning
toast.add({
title: 'Warning',
description: 'Verify data before continuing.',
color: 'warning'
})
</script>
```
**Valid colors:** `'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'neutral'`
```typescript
// app.vue
useSeoMeta({
title: 'SaaS Platform - Complete Business Solutions',
description: 'Transform your business with our complete platform. Automate processes, increase productivity.',
keywords: 'saas platform, business solutions, automation, productivity',
ogTitle: 'SaaS Platform - Complete Business Solutions',
ogDescription: 'Discover how our platform can revolutionize your business.',
ogImage: '/og-image.png',
twitterCard: 'summary_large_image',
author: 'SaaS Platform'
})
```
```typescript
// pages/dashboard.vue
definePageMeta({
title: 'Dashboard - System Overview',
description: 'Track important metrics, manage projects, and view real-time reports.',
})
```
```typescript
// pages/index.vue
useJsonld({
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: 'SaaS Platform',
description: 'Complete business solutions for automation and management',
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web Browser',
offers: {
'@type': 'Offer',
priceCurrency: 'USD',
price: '0',
description: 'Free plan available'
}
})
```
**Required:**
**Recommended:**
```vue
<template>
<NuxtImg
src="/hero-image.jpg"
alt="SaaS Platform in action"
width="1200"
height="600"
loading="eager"
format="webp"
/>
</template>
```
```vue
<template>
<div>
<HeroSection />
<LazyFeaturesSection />
<LazyTestimonialsSection />
</div>
</template>
```
1. **Always verify data structure** with Supabase before implementing features
2. **Use Nuxt UI components** consistently for UI elements
3. **Follow authentication patterns** for protected routes
4. **Implement proper error handling** with try-catch blocks
5. **Use toast notifications** with appropriate colors for user feedback
6. **Apply SEO best practices** on every page
7. **Optimize images** using NuxtImg component
8. **Use TypeScript** for type safety
9. **Follow responsive design** patterns with Tailwind classes
10. **Test authentication flows** thoroughly
```typescript
<script setup lang="ts">
const user = useSupabaseUser()
if (!user.value) await navigateTo('/login')
</script>
```
```typescript
const { data, error } = await supabase
.from('table')
.select('*')
.eq('user_id', user.value.id)
```
```typescript
const handleSubmit = async () => {
loading.value = true
try {
const { error } = await supabase
.from('table')
.insert({ ...formData })
if (error) throw error
toast.add({ title: 'Success', color: 'success' })
} catch (error) {
toast.add({ title: 'Error', color: 'error' })
} finally {
loading.value = false
}
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nuxtjs-supabase-development-guide/raw