如何将 Bootstrap5 的 Masonry 正确加载到 Nuxt 中? [英] How to properly load Bootstrap5's Masonry into Nuxt?
问题描述
我正在尝试在 Bootstrap5 和 NuxtJS 中使用
<块引用>引导程序示例:
我需要做什么才能使我的演示变成 Bootstrap Masonry 示例页面上显示的格式?
我检查了如何从 CDN 全局或本地加载脚本.它可以工作，但在一个条件下:您需要不要从砌体页面开始.
这意味着如果您在特定页面上加载应用程序，然后移动到它正在工作的砖石页面.但如果您从这个特定页面开始，则不会.所以，一个相当低级的解决方案.
这篇文章对理解如何等待 CDN 脚本完全加载很有帮助:https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
然后我意识到我们将它直接安装为 NPM 依赖项要好得多.因此，我继续使用 masonry 存储库.找到一个很好的信息，关于如何在 Nuxt 中设置整个事情.
在删除一些无用的东西和一些现代动态导入之后，我们来了
<主要><h1>自举和砌体</h1><div class="row";id=砌体"><!-- ... --></main><脚本>导出默认{异步挂载(){如果(进程浏览器){让 { 默认:砌体 } = 等待导入('砌体布局')new Masonry('#masonry', { percentPosition: true })}},}最终的解决方案看起来还不错，代码也不多.最重要的是，代码已正确加载.您可以通过点击或任何其他事件加载它.
I am trying to use the Masonry plugin with Bootstrap5 and NuxtJS. When I follow the example here 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:
What do I need to do to get my demo into format shown on the Bootstrap Masonry example page?
I checked how to load the script from a CDN either globally or locally. It was working but at one condition: you needed to NOT start on the masonry page.
Meaning that if you loaded the app on a specific page, then moved to the one with the masonry it was working. But not if you started on this specific page. So, a pretty subpar solution.
This article was really helpful to understand how to wait until the CDN script is fully loaded: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
Then I realized that we are far better installing it directly as an NPM dependency. Therefore, I proceeded to the masonry repo. Found a great message on how to setup the whole thing in Nuxt.
And after a removal of some useless stuff and some modern dynamic import, here we are
<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>
The final solution is looking pretty well and there is not a lot of code. On top of that, the code is properly loaded. And you can load it on a click or any other event.
这篇关于如何将 Bootstrap5 的 Masonry 正确加载到 Nuxt 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
