kissu Comments - Answer Overflow

kissu

Posts Comments

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

13 replies

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

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

13 replies

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

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

13 replies

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

13 replies

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

Not sure, tried with

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

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

but to no use. x)

13 replies

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

13 replies

NNuxt

•Created by kissu on 9/22/2024 in #❓・help

How to access the entry.js file ala Vue3?

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

13 replies

NNuxt

•Created by erztemplerobba on 11/26/2022 in #❓・help

Nuxt3 feasible with large amount of pages?

Your pages and their routes will be code-splitted. https://nuxt.com/docs/getting-started/routing#routing So, if you have 2 or 4.000.000.000 pages, the speed will be the same. Bundling may be slower if you want them all static, but the runtime experience will stay the same (fast). 👍🏻 Assuming you're doing this properly and not getting memory leaks from page to page, by using querySelector or events listeners for example.

3 replies

NNuxt

•Created by Wellington Capoia on 11/24/2022 in #❓・help

UseCookie has a nesting limit?

Your JSONbin has expired.

4 replies

Gaming

Programming