(ssr) migrate nuxt config & setup

Author: FeBe95

examples/nuxt/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Nuxt />
+    <slot />
   </div>
 </template>
 

examples/nuxt/nuxt.config.js

@@ -1,59 +1,15 @@
-export default {
-  /*
-   ** Nuxt rendering mode
-   ** See https://nuxtjs.org/api/configuration-mode
-   */
-  mode: 'universal',
-  /*
-   ** Nuxt target
-   ** See https://nuxtjs.org/api/configuration-target
-   */
-  target: 'server',
-  /*
-   ** Headers of the page
-   ** See https://nuxtjs.org/api/configuration-head
-   */
-  head: {
-    title: process.env.npm_package_name || '',
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      {
-        hid: 'description',
-        name: 'description',
-        content: process.env.npm_package_description || '',
-      },
-    ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  compatibilityDate: '2025-05-23',
+  devServer: {
+    host: '::1'
   },
-  /*
-   ** Global CSS
-   */
-  css: [],
-  /*
-   ** Plugins to load before mounting the App
-   ** https://nuxtjs.org/guide/plugins
-   */
-  plugins: ['~/plugins/vue-js-modal.js'],
-  /*
-   ** Auto import components
-   ** See https://nuxtjs.org/api/configuration-components
-   */
-  components: true,
-  /*
-   ** Nuxt.js dev-modules
-   */
-  buildModules: [
-    // Doc: https://github.com/nuxt-community/eslint-module
-    '@nuxtjs/eslint-module',
+  ssr: process.env.NUXT_RENDERING_MODE !== 'csr',
+  plugins: [
+    process.env.NUXT_RENDERING_MODE === 'csr'
+      ? '~/plugins-no-auto-import/vue-js-modal-csr.js'
+      : '~/plugins-no-auto-import/vue-js-modal-ssr.js'
   ],
-  /*
-   ** Nuxt.js modules
-   */
-  modules: [],
-  /*
-   ** Build configuration
-   ** See https://nuxtjs.org/api/configuration-build/
-   */
-  build: {},
-}
+  modules: ['@nuxt/eslint']
+})

examples/nuxt/package.json

@@ -3,11 +3,10 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt",
-    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt build",
-    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt start",
-    "export": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt export",
-    "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt serve",
+    "dev:ssr": "cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_RENDERING_MODE=ssr nuxt dev --open",
+    "build:ssr": "cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_RENDERING_MODE=ssr nuxt build",
+    "dev:csr": "cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_RENDERING_MODE=csr nuxt dev --open",
+    "build:csr": "cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_RENDERING_MODE=csr nuxt build",
     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lint": "yarn lint:js"
   },

examples/nuxt/pages/index.vue

@@ -9,6 +9,7 @@
       <div class="links">
         <button class="button--green" @click="click">Show modal</button>
       </div>
+      <p style="margin-top: 40px">{{ renderMode }}</p>
     </div>
   </div>
 </template>
@@ -20,6 +21,13 @@ export default {
   components: {
     ExampleModal
   },
+  computed: {
+    renderMode() {
+      return this.$nuxt.payload.serverRendered
+        ? 'Server-Side Rendering'
+        : 'Client-Side Rendering'
+    }
+  },
   methods: {
     click() {
       this.$modal.show('example-modal')

examples/nuxt/plugins-no-auto-import/vue-js-modal-csr.js

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import Modal from '../../../dist/ssr.index'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Modal)
+})

examples/nuxt/plugins-no-auto-import/vue-js-modal-ssr.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import Modal from '../../../dist/ssr.nocss'
+
+import '../../../dist/styles.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Modal)
+})