vue.js - 如何正确地将Bootstrap5的Masonry加载到Nuxt中？

Question

我正在尝试使用 Masonry plugin使用 Bootstrap5 和 NuxtJS。当我按照这里的例子 https://getbootstrap.com/docs/5.0/examples/masonry/并将其合并到我自己的codesandbox中，我注意到我的演示的砖石格式不正确。看到差距了吗？ <强> My sandbox

My example:

Bootstrap's example:

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

Answer 1

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

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

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

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