我如何將 p5.js 與 nuxt 集成

Question

我正在嘗試將 p5.js 與 nuxt 集成。

  mounted () {
    const sketch = (s) => {
      s.setup = () => {
        s.createCanvas(500, 500)
      }
      s.draw = () => {
        s.background(33, 33, 33)
      }
    }
    // eslint-disable-next-line no-unused-vars
    const canvas = new P5(sketch, 'p5Canvas')
  },

我試過在這里做，但我得到 Window is not defined 錯誤。 我也嘗試在 Created 而不是 Mounted 中這樣做，但結果是一樣的。

Answer 1

您可以在mounted的 function 中動態導入p5 ，如下所示：

  async mounted () {
    const { default: P5 } = await import('p5')

    const sketch = (s) => {
      s.setup = () => {
        s.createCanvas(500, 500)
      }
      s.draw = () => {
        s.background(33, 33, 33)
      }
    }
    // eslint-disable-next-line no-unused-vars
    const canvas = new P5(sketch, 'p5Canvas')
  },

Answer 2

在 Nuxt 中， mounted和created的生命周期方法在客戶端和服務器端都運行。 雖然它可以在前者上按預期工作，但它不會在后者上工作，因為沒有window object 服務器端。

您只能通過以下方式使此代碼在客戶端運行：

if (process.browser) {
  // Your code
}