Nuxt•5mo ago

How to access the entry.js file ala Vue3?

I do have a successful config with a Vu3 app with the following

export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],

    build: {
      outDir: '../../public/dist',
      emptyOutDir: true,
      manifest: true,

      rollupOptions: {
        input: path.resolve(__dirname, 'src/main.js'),
      }
    },

    server: {
      strictPort: true,
      port: 5133,
      hmr: {
        host: 'localhost'
      }
    },
  }
})

export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],

    build: {
      outDir: '../../public/dist',
      emptyOutDir: true,
      manifest: true,

      rollupOptions: {
        input: path.resolve(__dirname, 'src/main.js'),
      }
    },

    server: {
      strictPort: true,
      port: 5133,
      hmr: {
        host: 'localhost'
      }
    },
  }
})

This allows me to access the output of the Vue project from a PHP app thanks to the following endpoint http://localhost:5133/main.js --- In the Nuxt3 app, the entry point should be: http://localhost:5233/_nuxt/entry.js AFAIK But I only have a 404 when visiting that one This is the config of the Nuxt3 app

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  ssr: false,
  
  devServer: {
    port: 5233,
    host: 'localhost',
  },

  vite: {
    server: {
      strictPort: true,
      hmr: {
        host: 'localhost'
      }
    }
  },
})

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  ssr: false,
  
  devServer: {
    port: 5233,
    host: 'localhost',
  },

  vite: {
    server: {
      strictPort: true,
      hmr: {
        host: 'localhost'
      }
    }
  },
})

PS: the local app runs well if accessed directly (hence only the Nuxt app) and the HMR script is also loaded properly from http://localhost:5233/_nuxt/@vite/client inside of the PHP app I am mostly not sure if I'm missing some kind of additional config or using the wrong endpoint for the entry.js file. 🤔

10 Replies

manniL•5mo ago

entry.js will have a hash attached for cache busting example: https://www.lichter.io/_nuxt/entry.zAEaBz9c.js you can disable these hashs if needed but this will remove cache busting

kissuOP•5mo ago

Oh that's why I saw some topics on the hashnames. 👌🏻 Makes sense indeed. Not being able to bust the cache is fine for my use case tbh. Do you have a link as of how to do so by any luck? 💖

manniL•5mo ago

https://github.com/nuxt/nuxt/pull/26203 should help to show

GitHub

fix(vite): drop name prefix for client chunk file names by danielro...

🔗 Linked issue resolves #13499 ❓ Type of change 📖 Documentation (updates to the documentation or readme) 🐞 Bug fix (a non-breaking change that fixes an issue) 👌 Enhancement (improving an existi...

kissuOP•5mo ago

Okay so I tried with some updated settings

vite: {
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: '_nuxt/[name].js',
        entryFileNames: '_nuxt/[name].js',
        assetFileNames: '_nuxt/[name].[ext]'
      }
    }
  },
  $client: {
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: '_nuxt/[name].js',
          entryFileNames: '_nuxt/[name].js'
        }
      }
    }
  },
}

vite: {
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: '_nuxt/[name].js',
        entryFileNames: '_nuxt/[name].js',
        assetFileNames: '_nuxt/[name].[ext]'
      }
    }
  },
  $client: {
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: '_nuxt/[name].js',
          entryFileNames: '_nuxt/[name].js'
        }
      }
    }
  },
}

Works out well if accessed directly from Nuxt itself as seen on the image, but I do have an error when injected into the PHP view file. I did pnpm generate && pnpm run for the Nuxt's dev server part. The PHP view uses http://localhost/pizza as path.

kissuOP•5mo ago

Not sure, tried with

experimental: {
  renderJsonPayloads: false,
  appManifest: false,
},

experimental: {
  renderJsonPayloads: false,
  appManifest: false,
},

but to no use. x)

kissuOP•5mo ago

also generates it properly should I load it from somewhere else than _nuxt? in the end, I'm just trying to have a webdev server working inside of PHP, nothing too intense (with no build step each time preferably haha)

kissuOP•5mo ago

I do load them this way into the PHP view

<div id="__nuxt"></div>
[...]
  <script type="module" src="<?= $vite('_nuxt/@vite/client') ?>"></script>
  <script type="module" src="<?= $vite('_nuxt/entry.js') ?>"></script>

<div id="__nuxt"></div>
[...]
  <script type="module" src="<?= $vite('_nuxt/@vite/client') ?>"></script>
  <script type="module" src="<?= $vite('_nuxt/entry.js') ?>"></script>

public static function indexPage()
  {
    $message = $_ENV['APP_ENV'];
    $ep = Config::AI_ENDPOINT;

    $viteFunction = function ($path) {
      // Development mode - point to the Vite dev server
      if ($_ENV['APP_ENV'] === 'development') {
        return "http://localhost:5233/" . $path;
      }

      // Production mode - load the manifest to get the hashed files
      $manifest = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/dist/manifest.json'), true);

      return '/dist/' . $manifest[$path]['file'];
    };

    View::render(
      "Home/Pizza.php",
      [
        'message' => $message,
        'vite' => $viteFunction
      ]
    );
  }

public static function indexPage()
  {
    $message = $_ENV['APP_ENV'];
    $ep = Config::AI_ENDPOINT;

    $viteFunction = function ($path) {
      // Development mode - point to the Vite dev server
      if ($_ENV['APP_ENV'] === 'development') {
        return "http://localhost:5233/" . $path;
      }

      // Production mode - load the manifest to get the hashed files
      $manifest = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/dist/manifest.json'), true);

      return '/dist/' . $manifest[$path]['file'];
    };

    View::render(
      "Home/Pizza.php",
      [
        'message' => $message,
        'vite' => $viteFunction
      ]
    );
  }

manniL•5mo ago

you need to add the runtimeConfig that is usually injected in nuxt

kissuOP•5mo ago

okay I got it! Injecting the following into the PHP view indeed does the job.

<script>
    window.__NUXT__ = {
    "config": {
        "public": {
            "baseURL": "/"
        },
        "app": {
            "baseURL": "/",
            "buildId": "dev",
            "buildAssetsDir": "/_nuxt/",
            "cdnURL": ""
        }
    },
    "serverRendered": false
  }
  </script>

<script>
    window.__NUXT__ = {
    "config": {
        "public": {
            "baseURL": "/"
        },
        "app": {
            "baseURL": "/",
            "buildId": "dev",
            "buildAssetsDir": "/_nuxt/",
            "cdnURL": ""
        }
    },
    "serverRendered": false
  }
  </script>

I have a few errors regarding the router, not the biggest issue + Tailwind does not work. I guess I can fix those. My primary concern now, is the fact that even if it works it requires some pnpm generate && pnpm dev each time to update the modifications on the PHP view. While the JS dev server HMRs properly. There's no way to have a proper reload without building the entire app each time? Here is the current config I do have.

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  ssr: false,

  modules: ['@nuxtjs/tailwindcss'],

  devServer: {
    port: 5233,
    host: 'localhost',
  },

  vite: {
    // 👇🏻 this works for VueJS + Vite
    server: {
      strictPort: true,
      hmr: {
        host: 'localhost',
        port: 5133
      },
    },
    // ☝🏻 this works for VueJS + Vite

    build: {
      rollupOptions: {
        output: {
          chunkFileNames: '_nuxt/[name].js',
          entryFileNames: '_nuxt/[name].js',
          assetFileNames: '_nuxt/[name].[ext]'
        }
      }
    },
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[name].js',
            entryFileNames: '_nuxt/[name].js'
          }
        }
      }
    },
    plugins: [
      {
        name: 'php-live-reload',
        configureServer(server) {
          server.watcher.add([
            __dirname + '/../(App|Config|Views)/**/*.php',
            __dirname + '/../public/*.php',
          ])
        }
      }
    ],
  },
})

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  ssr: false,

  modules: ['@nuxtjs/tailwindcss'],

  devServer: {
    port: 5233,
    host: 'localhost',
  },

  vite: {
    // 👇🏻 this works for VueJS + Vite
    server: {
      strictPort: true,
      hmr: {
        host: 'localhost',
        port: 5133
      },
    },
    // ☝🏻 this works for VueJS + Vite

    build: {
      rollupOptions: {
        output: {
          chunkFileNames: '_nuxt/[name].js',
          entryFileNames: '_nuxt/[name].js',
          assetFileNames: '_nuxt/[name].[ext]'
        }
      }
    },
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[name].js',
            entryFileNames: '_nuxt/[name].js'
          }
        }
      }
    },
    plugins: [
      {
        name: 'php-live-reload',
        configureServer(server) {
          server.watcher.add([
            __dirname + '/../(App|Config|Views)/**/*.php',
            __dirname + '/../public/*.php',
          ])
        }
      }
    ],
  },
})

Vue can just update the changes and send it down the wire but not Nuxt? 🥺

kissuOP•5mo ago

Gaming

Programming

How to access the entry.js file ala Vue3?

Did you find this page helpful?