如何将 Bootstrap5 的 Masonry 正确加载到 Nuxt？

Question

我正在尝试将 Masonry plugin 与 Bootstrap5 和 NuxtJS 一起使用。当我按照这里的例子 https://getbootstrap.com/docs/5.0/examples/masonry/ 并将其合并到我自己的 codesandbox 中，我注意到我的演示不是正确的砌体格式。看到缝隙了吗？ My sandbox

我的例子：

Bootstrap 的例子：

我需要做什么才能让我的演示变成 Bootstrap Masonry 示例页面上显示的格式？

Answer 1

我检查了如何在全局或本地从 CDN 加载脚本。它可以工作，但有一个条件：您需要不从砌体页面开始。
这意味着如果您将应用程序加载到特定页面上，然后移至具有正在工作的砌体的页面。但如果您从这个特定页面开始，则不会。所以，这是一个相当低劣的解决方案。

这篇文章对理解如何等待 CDN 脚本完全加载很有帮助：https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/

然后我意识到我们直接将它安装为 NPM 依赖项要好得多。因此，我继续使用masonry 回购。找到a great message 了解如何在 Nuxt 中设置整个东西。

在删除了一些无用的东西和一些modern dynamic import之后，我们来到了

<template>
  <main>
    <h1>Bootstrap and Masonry</h1>

    <div class="row" id="masonry">
    <!-- ... -->
  </main>
</template>

<script>
export default {
  async mounted() {
    if (process.browser) {
      let { default: Masonry } = await import('masonry-layout')
      new Masonry('#masonry', { percentPosition: true })
    }
  },
}
</script>

最终的解决方案看起来还不错，代码也不多。最重要的是，代码已正确加载。您可以通过点击或任何其他事件加载它。