#How to access the entry.js file ala Vue3?

12 messages · Page 1 of 1 (latest)

blazing hill
#

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'
      }
    },
  }
})

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'
      }
    }
  },
})

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. 🤔

dull socket
#

you can disable these hashs if needed but this will remove cache busting

blazing hill
#

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? 💖

dull socket
blazing hill
#

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'
        }
      }
    }
  },
}

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.

CleanShot_2024-09-23_at_18.42.312x.png CleanShot_2024-09-23_at_18.43.062x.png
#

Not sure, tried with

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

but to no use. x)

#

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)

CleanShot_2024-09-23_at_18.57.112x.png
#

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>

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
      ]
    );
  }
dull socket
#

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

blazing hill
#

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>

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',
          ])
        }
      }
    ],
  },
})

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