logo

Prepare & Optimize for production

Use the correct Nuxt.js rendering mode

It's important to know which rendering mode and deployment target you choose for the given project.

Here is a pretty good summarize which mode to choose from: What's the real difference between target: 'static' and target: 'server' in Nuxt 2.14 universal mode?

Read more here:

Choose Hosting Providerss

Vercel

  • Static and SSR

Netlify

Check your dependencies in package.json

In overall you can say

  • dependencies are required during runtime.
  • devDependencies are only for development.

Check your package.json config if your packages are installed in the correct

Read more here:

Deploy your Nuxt ssr app to vercel

Reduce your bundle size

Run

yarn analyze

Reduce vue-tailwind bundle size

Since nujek has vue-tailwind support you should check if you use components only which you need. Read more here: vue tailwind - install components you need

❌

vue-tailwind.js
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import { TModal, TButton, TTag, TToggle } from 'vue-tailwind/dist/components'

const settings = {
 // your code
}

Vue.use(VueTailwind, settings)
analyze before

✅

vue-tailwind.js
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TModal from 'vue-tailwind/dist/t-modal'
import TButton from 'vue-tailwind/dist/t-button'
import TTag from 'vue-tailwind/dist/t-tag'
import TToggle from 'vue-tailwind/dist/t-toggle'

const settings = {
 // your code
}

Vue.use(VueTailwind, settings)
analyze after
Writing purgeable HTML Deploy on netlify