|
| 1 | +# Nuxt.js Preset |
| 2 | + |
| 3 | +This preset enables Server-Side Rendering (SSR) and Static Site Generation (SSG) for Nuxt.js applications on the Azion Platform. |
| 4 | + |
| 5 | +## Prerequisites |
| 6 | + |
| 7 | +- Node.js 18+ |
| 8 | +- Nuxt.js 3.x project |
| 9 | +- Azion CLI installed globally |
| 10 | + |
| 11 | +## Installation |
| 12 | + |
| 13 | +First, install the Azion package in your Nuxt.js project: |
| 14 | + |
| 15 | +```bash |
| 16 | +npm install azion |
| 17 | +``` |
| 18 | + |
| 19 | +## Configuration SSR |
| 20 | + |
| 21 | +Configure your `nuxt.config.ts` to use the Azion SSR preset: |
| 22 | + |
| 23 | +```typescript |
| 24 | +import { createRequire } from 'module'; |
| 25 | +const require = createRequire(import.meta.url); |
| 26 | + |
| 27 | +export default defineNuxtConfig({ |
| 28 | + nitro: { |
| 29 | + preset: require.resolve('azion/preset/nuxt/ssr'), |
| 30 | + }, |
| 31 | +}); |
| 32 | +``` |
| 33 | + |
| 34 | +Or directly with the path node_modules: |
| 35 | + |
| 36 | +```typescript |
| 37 | +export default defineNuxtConfig({ |
| 38 | + nitro: { |
| 39 | + preset: './node_modules/azion/packages/presets/src/presets/nuxt/nitro/ssr', |
| 40 | + }, |
| 41 | +}); |
| 42 | +``` |
| 43 | + |
| 44 | +## Configuration SSG |
| 45 | + |
| 46 | +Configure your `nuxt.config.ts` to use the Azion SSG preset: |
| 47 | + |
| 48 | +```typescript |
| 49 | +import { createRequire } from 'module'; |
| 50 | +const require = createRequire(import.meta.url); |
| 51 | + |
| 52 | +export default defineNuxtConfig({ |
| 53 | + nitro: { |
| 54 | + preset: require.resolve('azion/preset/nuxt/ssg'), |
| 55 | + }, |
| 56 | +}); |
| 57 | +``` |
| 58 | + |
| 59 | +Or directly with the path node_modules: |
| 60 | + |
| 61 | +```typescript |
| 62 | +export default defineNuxtConfig({ |
| 63 | + nitro: { |
| 64 | + preset: './node_modules/azion/packages/presets/src/presets/nuxt/nitro/ssg', |
| 65 | + }, |
| 66 | +}); |
| 67 | +``` |
| 68 | + |
| 69 | +## If your configuration not contains the nitro preset |
| 70 | + |
| 71 | +If your `nuxt.config.ts` doesn't include a nitro preset configuration, our preset will automatically execute `npx nuxt generate` to create a static project. |
| 72 | + |
| 73 | +```typescript |
| 74 | +export default defineNuxtConfig({ |
| 75 | + ... |
| 76 | +}); |
| 77 | +``` |
| 78 | + |
| 79 | +## Project Setup |
| 80 | + |
| 81 | +### 1. Link Your Project |
| 82 | + |
| 83 | +Connect your project to Azion and select the Nuxt preset: |
| 84 | + |
| 85 | +```bash |
| 86 | +azion link |
| 87 | +``` |
| 88 | + |
| 89 | +When prompted, choose the **Nuxt preset** from the available options. |
| 90 | + |
| 91 | +## Development Workflow |
| 92 | + |
| 93 | +### Preview Your Application |
| 94 | + |
| 95 | +#### Build and Preview |
| 96 | + |
| 97 | +Build your application and preview it locally: |
| 98 | + |
| 99 | +```bash |
| 100 | +azion build |
| 101 | +azion dev |
| 102 | +``` |
| 103 | + |
| 104 | +#### Skip Framework Build (Optional) |
| 105 | + |
| 106 | +If you want to skip the Nuxt.js framework build process and use existing build artifacts: |
| 107 | + |
| 108 | +```bash |
| 109 | +azion dev --skip-framework-build |
| 110 | +``` |
| 111 | + |
| 112 | +This is useful when you've already built your Nuxt application and want to quickly test the edge function behavior. |
| 113 | + |
| 114 | +## Deployment |
| 115 | + |
| 116 | +### Deploy to Azion Edge |
| 117 | + |
| 118 | +Deploy your application directly from your local environment: |
| 119 | + |
| 120 | +```bash |
| 121 | +azion -t <personal-token> |
| 122 | +azion deploy --local |
| 123 | +``` |
| 124 | + |
| 125 | +This command will: |
| 126 | + |
| 127 | +1. Build your Nuxt.js application with the SSR preset |
| 128 | +2. Package the edge function |
| 129 | +3. Deploy to Azion's edge network |
| 130 | +4. Provide you with the deployment URL |
| 131 | + |
| 132 | +## Features |
| 133 | + |
| 134 | +The Nuxt.js SSR preset provides: |
| 135 | + |
| 136 | +- **Server-Side Rendering**: Full SSR support with Nuxt.js |
| 137 | +- **Edge Runtime**: Optimized for Azion's edge computing platform |
| 138 | +- **Automatic Optimization**: Built-in performance optimizations for edge deployment |
| 139 | +- **Static Asset Handling**: Efficient static file serving |
| 140 | +- **API Routes**: Support for Nuxt.js server API routes |
| 141 | + |
| 142 | +## Troubleshooting |
| 143 | + |
| 144 | +### Common Issues |
| 145 | + |
| 146 | +**Build Errors**: Ensure your `nuxt.config.ts` is properly configured with the preset path. |
| 147 | + |
| 148 | +**Deployment Failures**: Verify that the Azion CLI is authenticated and your project is properly linked. |
| 149 | + |
| 150 | +**Runtime Errors**: Check that your Nuxt.js application is compatible with edge runtime constraints. |
| 151 | + |
| 152 | +### Getting Help |
| 153 | + |
| 154 | +For additional support: |
| 155 | + |
| 156 | +- Check the [Azion Documentation](https://www.azion.com/en/documentation/) |
| 157 | +- Visit the [Nuxt.js Documentation](https://nuxt.com/docs) |
| 158 | +- Contact Azion Support for platform-specific issues |
| 159 | + |
| 160 | +## Example Project Structure |
| 161 | + |
| 162 | +``` |
| 163 | +my-nuxt-app/ |
| 164 | +├── nuxt.config.ts # Azion preset configuration |
| 165 | +├── package.json # Include azion dependency |
| 166 | +├── pages/ # Nuxt.js pages |
| 167 | +├── server/ # Server API routes |
| 168 | +├── components/ # Vue components |
| 169 | +└── assets/ # Static assets |
| 170 | +``` |
| 171 | + |
| 172 | +## Next Steps |
| 173 | + |
| 174 | +After successful deployment: |
| 175 | + |
| 176 | +1. Test your application on the provided edge URL |
| 177 | +2. Configure custom domains if needed |
| 178 | + |
| 179 | +> **Note**: We are currently working on a Pull Request to the official Nitro repository to include an Azion preset natively. This will simplify the configuration process in future versions. |
0 commit comments