Prerequisites
- An OwnStak account with a fully set up organization
- A Nuxt project (version 3.0.0 - 4.x.x)
- Node.js installed locally (version 18.x or higher)
Getting Started
1. Prepare your Nuxt project
Create a new Nuxt project by running:
npm create nuxt@latest
Once the wizard finishes, enter the project directory and install all dependencies:
cd my-nuxt-app
npm install
For existing projects, remove any provider-specific settings from your nuxt.config.js file.
2. Deploy from your machine
Now, you can deploy the project from your machine by running:
npx ownstak deploy
When you run the deploy command for the first time, the CLI will detect the currently used framework and guide you through the login and project configuration setup. Simply follow the instructions:
The organization and project names are stored in the ownstak.config.js configuration file for subsequent deployments, so you won't be prompted for this information again.
3. Deploy from CI
For CI and other non-persistent environments, you can skip the interactive deployment by providing the API key and other required options as command arguments.
You can generate a new API key for your account or project in the OwnStak Console under Settings > API Keys.
npx ownstak deploy --api-key=<your-secret-key> --organization=ownstak --project=my-nuxt-app --environment=default
4. Done!
Your project is now live and deployed to your organization's cloud infrastructure. You can visit and test it using the environment and deployment links provided in the output:
- Environment link – Always points to the latest deployment in a given project environment
Example:
my-nuxt-app-development.aws-primary.my-org.ownstak.link - Deployment link – Always points to a specific deployment
Example:
my-nuxt-app-development-10.aws-primary.my-org.ownstak.link
Local testing
If your project doesn't behave as expected, you can build and test it locally before deploying.
1. Build the project
Run the following command in your project directory to build your project without deploying it:
npx ownstak build
2. Start the project
Start the project and make sure it works for you locally with OwnStak:
npx ownstak start
When you see the ready message, you can visit http://localhost:3000 to test your application.
Image Optimization
OwnStak provides an image optimization service that supports changing width, height, format, and quality. To use it with Nuxt, you need to configure a custom image provider.
1. Install @nuxt/image
First, install the necessary package for image optimization:
npm install @nuxt/image
2. Configure @nuxt/image
Add the Nuxt Image module to your nuxt.config.js:
export default defineNuxtConfig({
modules: [
'@nuxt/image'
],
image: {
providers: {
ownstak: {
name: 'ownstak',
provider: '~/providers/ownstak.js'
}
}
}
})
3. Add custom provider
Create a custom image provider file at providers/ownstak.js:
export default {
name: 'ownstak',
provider: 'ownstak',
options: {
baseURL: '/__ownstak__/image'
},
getImage(src, { modifiers, baseURL } = {}) {
const { width, height, quality, format } = modifiers || {}
// Build query parameters. Empty is treated as "auto".
const params = new URLSearchParams()
params.set('url', src)
if (width) params.set('w', width)
if (height) params.set('h', height)
if (quality) params.set('q', quality)
if (format) params.set('f', format)
// Return the optimized image URL
// e.g. /__ownstak__/image?url=/image1.png&w=100&h=100&q=75
return `${baseURL}?${params.toString()}`
}
}
4. Use the provider
Now you can use the <NuxtImg> component with custom provider and automatic optimization:
<template>
<div>
<NuxtImg
provider="ownstak"
src="/images/hero.jpg"
alt="Hero image"
width="800"
height="600"
/>
</div>
</template>
Middleware
The middlewares are executed by the Nitro server inside compute. It runs on all SSR (server-side-rendered) pages but not in front of static assets or pre-rendered pages.
Caching
The OwnStak by default sets different cache-control headers for assets, permanent assets and pre-rendered pages with reasonable time for your CDN
for the best performance. It's expected to do cache purge via Webhooks after every deployment.
See CDN Configuration. Default Cache-control headers can be overridden.
Headers
OwnStak integrates with Nuxt, so you can define custom HTTP response headers using Nitro's route rules as you're used to.
OwnStak will apply the headers to corresponding SSR pages, pre-rendered pages, and static assets such as CSS/JS files.
You can also set headers programmatically from SSR pages or define them in your ownstak.config.js file.
export default defineNuxtConfig({
nitro: {
routeRules: {
// Apply to all paths
'/**': {
headers: {
'X-Frame-Options': 'DENY',
'X-Content-Type-Options': 'nosniff',
'Referrer-Policy': 'strict-origin-when-cross-origin'
}
},
// Apply to specific paths
'/_nuxt/**': {
headers: {
'Cache-Control': 'public, max-age=31536000, immutable'
}
}
}
}
})
Redirects
Static redirects can be defined using Nitro's route rules in your nuxt.config.js file as you're used to.
OwnStak will apply the redirects to corresponding SSR, pre-rendered pages and static assets.
You can also set redirects programmatically from SSR pages or define them in your ownstak.config.js file.
export default defineNuxtConfig({
nitro: {
routeRules: {
'/old-page': { redirect: '/new-page' },
'/legacy/**': { redirect: { to: '/new/**', statusCode: 301 } },
}
}
})
Supported features
Here's a list of the features supported by OwnStak for Nuxt: