时间戳

首页 > 解决方案 > 使用 Masonry 作为 Nuxt.js 插件客户端

ecmascript-6 - 使用 Masonry 作为 Nuxt.js 插件客户端

问题描述

我正在尝试让 Masonry 在我正在构建的 Nuxt 网站上工作。我只需要它在客户端加载，我无法让它工作。

我认为根本问题是 Masonry 会自动初始化并在 HTML 中查找数据属性，因此如果它在服务器端运行，它会因为window不存在而崩溃。我以为我了解 Nuxt 的工作原理，但这让我质疑一切！哈哈！

所以首先我创建了一个插件，并且只在客户端加载它： nuxt.config.js 文件

然后我导入 masonry 包，然后导出它。我的理解是这只会在客户端运行。 nuxt插件文件内容

然后在我的组件中导入插件： 在此处输入图像描述

这样做会导致服务器崩溃，并出现来自 Masonry 的窗口未定义错误。为什么？！它应该只在客户端加载插件？！ 在此处输入图像描述

我实际上已经通过不使用插件步骤来实现这一点，并在我的组件中执行此操作：

 let Masonry
 if (process.client) {
     Masonry = require("masonry-layout")
 }

但这似乎是一种非常非 Nuxt 的做事方式。

那么我应该怎么做呢？我真的不想使用流行的 Vue-Masonry 包（它强制 Nuxt 上的 HTML 没有 ssr）并且它有很多布局错误，我也真的想用它来理解 Nuxt更好的。

我不应该使用 Nuxt 插件来做到这一点吗？将脚本放入头部并像普通 JS 一样使用它并进行 process.client 检查会更好吗？

标签： ecmascript-6nuxt.jsmasonry

解决方案

推荐阅读