AwesCode UI Nuxt Laravel Module

Seamless integration module for Nuxt.js applications with Laravel backends.

Overview

@awes-io/nuxt-laravel provides complete integration between Nuxt.js and Laravel, handling API proxying, build configuration, and deployment workflows.

Key Features:

• API Proxy: Automatic proxying of /api and /broadcasting routes to Laravel
• Build Integration: Builds Nuxt files directly into Laravel's public directory
• Environment Configuration: Easy setup with environment variables
• Version Plugin: Display app version and build date
• Development Workflow: Hot reload with Laravel backend proxy
• Production Build: Optimized SPA build for Laravel serving

Quick Start

Installation

yarn add @awes-io/nuxt-laravel

Requirements:

• Laravel 8+ with @awes-io/laravel-nuxt composer package
• Nuxt.js 2.x (SPA mode recommended)

Project Structure

project-root/
├── app/                    # Laravel application
├── resources/
│   └── nuxt/               # Nuxt source code
│       ├── assets/
│       ├── components/
│       ├── pages/
│       └── ...
├── storage/app/nuxt/       # Nuxt build output
├── public/                 # Laravel public (serves SPA)
├── nuxt.config.js          # Nuxt config (root)
├── package.json            # NPM dependencies (root)
└── composer.json           # Composer dependencies

Basic Setup

1. Configure Nuxt (nuxt.config.js):

export default {
    mode: 'spa',
    srcDir: 'resources/nuxt',

    modules: [
        '@awes-io/nuxt-laravel'  // Include first
    ]
}

2. Add Scripts (package.json):

{
    "scripts": {
        "dev": "LARAVEL_URL=http://localhost:8000 nuxt",
        "build": "LARAVEL_URL=http://localhost:8000 nuxt build",
        "generate": "LARAVEL_URL=http://localhost:8000 nuxt generate"
    }
}

3. Configure Environment (.env):

LARAVEL_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

Development Workflow

# Start Laravel backend
php artisan serve

# Start Nuxt dev server
yarn dev

Navigate to http://localhost:3000 - API requests are automatically proxied to Laravel.

Production Build

yarn generate

Builds Nuxt to storage/app/nuxt/ and copies to public/_nuxt/. Laravel serves the SPA.

Documentation

Comprehensive documentation is available in the /docs folder:

• Getting Started - Overview, quick start, features
• Setup - Installation and configuration
• Environment - Environment variables
• Proxy Routing - API proxy configuration
• API Communication - Making API calls
• Version Plugin - App version display
• Build Process - Development and production builds
• API Reference - Complete API documentation

Module Options

export default {
    modules: [
        ['@awes-io/nuxt-laravel', {
            generateDir: 'storage/app/nuxt',  // Custom build directory
            versionPlugin: {
                name: 'My Application',
                version: 'v1.0.0',
                date: '2024-01-15'
            }
        }]
    ]
}

What the Module Does

1. Includes Axios Module

Automatically adds and configures @nuxtjs/axios.

2. Configures API Proxy

Development:

• /api/* → proxied to http://localhost:8000/api/*
• /broadcasting/* → proxied to http://localhost:8000/broadcasting/*

Production:

• All requests → proxied to Laravel backend

3. Configures Build Output

• Sets generate.dir to storage/app/nuxt/
• Copies built files to public/_nuxt/ on generate
• Creates public/index.html as SPA entry point

4. Adds Version Plugin

Logs app version on page load:

console.log('[MyApp] Build Version: v1.0.0 (2024-01-15T10:30:00.000Z)')

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | LARAVEL_URL | Yes | Laravel backend URL | | NON_PROXY_URL | No | Direct API URL (skip proxy) | | FRONTEND_URL | No | Frontend URL (for CORS) | | APP_NAME | No | Application name | | APP_VERSION | No | App version | | APP_VERSION_DATE | No | Build date |

Common Usage Patterns

Making API Calls

// Automatically proxied to Laravel
const response = await this.$axios.get('/api/users')

Fetch Data on Page Load

<template>
    <div>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    async asyncData({ $axios }) {
        const response = await $axios.get('/api/items')
        return { items: response.data.data }
    }
}
</script>

Form Submission

<script>
export default {
    methods: {
        async submit() {
            try {
                await this.$axios.post('/api/items', this.form)
                this.$notify({ message: 'Created!', type: 'success' })
            } catch (error) {
                this.$notify({ message: 'Failed', type: 'error' })
            }
        }
    }
}
</script>

Development

Git Commit Convention

Ensure to write proper commit message according to Git Commit convention

Troubleshooting

API Requests Not Proxied

Check LARAVEL_URL environment variable:

echo $LARAVEL_URL
# Should output: http://localhost:8000

CORS Errors

Configure Laravel CORS in config/cors.php:

'paths' => ['api/*', 'broadcasting/*'],
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
'supports_credentials' => true,

External Resources

• Nuxt.js Documentation
• @nuxtjs/axios Documentation
• Laravel Documentation
• AwesCode UI Components
• AwesCode UI Nuxt Auth
• AwesCode UI Vue-MC