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

Question

我正在尝试将 Masonry plugin 与 Bootstrap5 和 NuxtJS 一起使用。当我按照这里的例子 https://getbootstrap.com/docs/5.0/examples/masonry/ and incorporate it into my own codesandbox, I notice that my demo is not in the correct masonry format. See the gaps? My sandbox

My example:

Bootstrap's example:

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

Answer 1

我检查了如何从全局或本地 CDN 加载脚本。它在工作，但在一种情况下：你需要NOT 从砌体页面开始。
这意味着如果您在特定页面上加载应用程序，然后移动到它正在运行的带有砌体的页面。但如果您从这个特定页面开始，则不会。所以，一个非常低级的解决方案。

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

然后我意识到我们最好将它作为 NPM 依赖项直接安装。因此，我继续 masonry repo. Found 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>

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

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

How to properly load Bootstrap5's Masonry into Nuxt?

nuxt.js

masonry

bootstrap-5