nuxt.js 相关问题

Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）

我有一个组件应该根据当前断点切换使用的布局。从“vue”导入{计算}；导入{断点Tailwin...</desc> <question vote="0"> <p>我有一个组件应该根据当前断点切换使用的布局。</p> <pre><code><script setup lang="ts"> import { computed } from "vue"; import { breakpointsTailwind } from "@vueuse/core"; const breakpoints = useBreakpoints(breakpointsTailwind); const layoutName = computed(() => breakpoints.smaller("md") ? "sidenav-mobile" : "sidenav-desktop", ); </script> <template> <div> {{ breakpoints.smaller("md") }}  <NuxtLayout :name="layoutName">  <template #links> <slot name="links"></slot> </template> </NuxtLayout> </div> </template> </code></pre> <p>调整断点下方或上方窗口的大小时，我的调试输出<pre><code>{{ breakpoints.smaller("md") }}</code></pre>正确更改为 true 或 false，但除非重新加载，否则布局不会切换。</p> <p>我做错了什么？</p> </question> <answer tick="false" vote="0"> <p>它返回一个引用。在模板中，它们是展开的，因此它“按预期”工作。</p> <p>在您的 <pre><code>computed</code></pre> 中，您需要添加 <pre><code>.value</code></pre> 来读取当前值。</p> </answer> </body></html>

vue.js vuejs3 nuxt.js vue-reactivity vueuse

回答 0 投票 0

Nuxt3 + 模块联邦

我正在尝试使用 Nuxt 3 测试模块联合，但我遇到了一些问题。当前设置我正在使用 docker 容器在本地进行测试。远程图书馆我正在尝试使用 webpack 模块之一

nuxt.js nuxtjs3 micro-frontend webpack-module-federation

回答 1 投票 0

Nuxt 3：获取槽的元素

下面是我的组件的代码，我也在使用VueUse，如果点击是在slot元素之外，我想触发vueUse的“onClickOutside”函数。但拿不到...

vue.js vuejs3 nuxt.js nuxtjs3

回答 1 投票 0

Nuxt 3 页面加载器在图像仍在加载时停止

我想显示加载屏幕，直到我的网站完全加载完毕。或像 page:finish 或 page:loading:end 这样的运行时钩子对我不起作用。两者都显示页面

nuxt.js nuxt3

回答 1 投票 0

一体化可下载 HTML 文件，包括来自 nuxt 应用程序的 Chart.js

我的要求是提供一个小型 Nuxt 应用程序，它生成一个简单的 HTML 文件，其中包括一些为我工作的公司的客户提供的服务的概述部分。具体用例...

javascript html vue.js nuxt.js server-side-rendering

回答 1 投票 0

使用 Vuetify 选择多个日期

常量日期 = ref(新日期(2024, 1, 19)) 我正在使用 Vue....

vue.js datepicker vuejs3 nuxt.js vuetify.js

回答 1 投票 0

NuxtPage 中的道具

美好的一天，我创建了一个页面，该页面应该根据调用的位置更改标题，我有一个问题，我需要将标题作为页面道具传递，我尝试使用 $router.push 发送它({...

vue.js nuxt.js vue-router

回答 1 投票 0

如何通过unimport自动导入项目的某个文件？

我正在使用名为 Unimport 的插件，该插件用于从第三方库或当前项目自动导入模块。它在 nuxt 中使用，可以在 nuxt.config.ts 中进行配置，如下所示：导出默认

javascript nuxt.js

回答 1 投票 0

如何在 Nuxt 3 中混淆代码？

我有一个用 nuxt 3 编码的项目。我想做代码混淆，但我找不到合适的资源。我的项目中有 .ts 和 .vue 文件。你能帮助我吗？我无法尝试任何事情

nuxt.js obfuscation nuxtjs3

回答 1 投票 0

如何在Dreamhost上安装NPM分享

第 0 行出现致命错误检查失败：reservation_.SetPermissions（protect_start，protect_size，permission）。 #FailureMessage对象：0x78686cd993b0 1: 0xa889e1 \[节点\] 2: 0x1a37055 V8_Fatal(字符...

laravel npm nuxt.js chat dreamhost

回答 2 投票 0

如何在nuxt3中使用vue自动数字输入掩码？

我需要用于金钱输入和电话号码输入的输入掩码。我尝试了这个 vue 包，但无法将其安装到 nuxt3 https://github.com/autoNumeric/vue-autoNumeric/tree/master 我定义了 nuxt3 插件...

javascript vue.js nuxt.js nuxt3

回答 1 投票 0

Nuxt 3 扩展项目会导致错误

每当我尝试使用以下方法扩展另一个 Nuxt 3 项目时：导出默认defineNuxtConfig({ // 这是在 `main-project` 中的 nuxt.config.ts 内延伸：[ '../测试扩展' ] }) 我...

nuxt.js extends

回答 2 投票 0

在nuxtjs3中如何使用useAsyncData和'pick'？

我正在尝试使用 useAsyncData 从 API 中获取一些数据并从中选择一些选项，但我失败了。欢迎有关 useAsyncData 中的选择选项的任何帮助。工作示例...

javascript vuejs3 nuxt.js fetch-api

回答 1 投票 0

如何访问$fetch服务器端Nuxt的返回值

我正在尝试使用 Nuxt3 $fetch 服务器端写入数据库。我正在使用 prisma 访问数据库。当我使用 $fetch 时，我希望端点将“成功”字符串返回给我的

nuxt.js fetch-api nuxtjs3

回答 1 投票 0

Nuxt 3-navigateTo 在 useFetch 后不起作用

知道为什么这不起作用吗？ useFetch 后无法重定向。 const {slug} = useRoute().p...</desc> <question vote="0"> <p>知道为什么这不起作用吗？</p> <p>我无法在<pre><code>useFetch</code></pre>之后重定向。</p> <pre><code><template> <div></div> </template> <script setup lang="ts"> const {slug} = useRoute().params await useFetch(`http://localhost/${slug}`, { async onResponse({response: {_data: data}}) { // I'm using google to make sure it's external, but will come from api const url = new URL('https://google.com') await navigateTo(url.href, { external: true }) } }) </script> </code></pre> </question> <answer tick="false" vote="0"> <p><pre><code>navigateTo</code></pre> 不适用于 <pre><code>useFetch</code></pre> 中的回调函数，但仅适用于 <pre><code>setup</code></pre> 脚本的第一层</p> <pre><code><script setup lang="ts"> const route = useRoute(); const { slug } = route.params; const { data: post } = await useFetch(`http://localhost/${slug}`); const { data: url } = await useFetch(`https://google.com`); navigateTo(url.value.href, { external: true }); </script> </code></pre> <p>确保 <pre><code>useFetch()</code></pre> 将返回 <pre><code>Ref</code></pre> 实例，并且您不需要 <pre><code>navigateTo</code></pre> 异步。</p> </answer> </body></html>

nuxt.js nuxtjs3

回答 0 投票 0

无法创建新的nuxt项目。使用 npm init nuxt-app nuxt-hello-world 时出现问题

一切正常，直到第 30 行，然后我得到： 31 愚蠢的日志文件开始清理日志，删除1个文件 32 定时 arborist:ctor 在 0ms 内完成 33 愚蠢的日志文件完成清理日志文件 34 http 获取...

nuxt.js

回答 1 投票 0

Nuxt 3 searchContent 总是返回空结果

所以我试图添加搜索功能，但 searchContent() 总是返回空数组。我不明白为什么这不起作用。我的 Markdown 文档位于 /content 中。这是一些相关的

nuxt.js

回答 1 投票 0

错误：未实现：FabricJs 中的 HTMLCanvasElement.prototype.getContext （未安装 canvas npm 包）

我在项目中使用fabric.js，当我构建项目时，出现此错误 Error: Not Implement: HTMLCanvasElement.prototype.getContext (without Installation the canvas npm package)。请帮助我...

vue.js nuxt.js fabricjs

回答 1 投票 0

如何更改nuxt中bootstrap 4中b表排序箭头的颜色？

我正在使用 nuxt 和 bootstrap，但表格中的默认排序箭头对于我的背景来说太暗了。如何更改排序箭头的颜色？我正在使用 nuxt 和 bootstrap，但表格中的默认排序箭头对于我的背景来说太暗了。如何更改排序箭头的颜色？ <b-table show-empty small striped hover stacked="md" :items="rankingList" :fields="fields" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" > package.json "dependencies": { "@nuxtjs/axios": "^5.3.6", "@nuxtjs/pwa": "^3.0.0-0", "bootstrap-vue": "^2.15.0", "chart.js": "^2.9.4", "chartjs-plugin-zoom": "^0.7.7", "node-sass": "^4.11.0", "nuxt": "^2.0.0", "sass-loader": "^7.1.0", "vue-chartjs": "^3.5.1", "vue-template-compiler": "^2.6.11", "vue2-transitions": "^0.3.0" }, "devDependencies": { "@nuxtjs/eslint-config": "^2.0.0", "@nuxtjs/eslint-module": "^1.0.0", "babel-eslint": "^10.0.1", "eslint": "^6.1.0", "eslint-plugin-nuxt": ">=0.4.2", "vue-cli-plugin-i18n": "^0.5.1" } 解决此问题的一种方法（无论如何都不应该存在，因为在暗表变体中我的箭头是白色的，因此它们是可见的）是覆盖 bootstrap 的 css。因此对于表格排序箭头 bootstrap 使用以下 3 个 css 无排序 body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ 背景图像：url(“数据：图像/svg+xml，%3csvg xmlns='http://www.w3.org/2000/svg'width='101'height='101'view-box='0 0 101 101'preserveAspectRatio='none'%3e%3cpath fill='red ' 不透明度='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='红色' 不透明度='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e% 3c/svg%3e")！重要； } 排序（升序） body .table.b-table>tfoot>tr>[aria-sort=升序], body .table.b-table>thead>tr>th[aria-sort=升序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'opacity='.3'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； } 排序（降序） body .table.b-table.table-dark>tfoot>tr>[aria-sort=降序]，body .table.b-table.table-dark>thead>tr>[aria-sort=降序]，body .table.b-table>.thead-dark>tr>[aria-sort=降序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'不透明度='.3'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； } 如果您注意到每个 css 内部都有一个指向 svg 元素的“background-image”属性。在每个 svg 元素内，它们被声明为 2 个“路径”元素。每个路径元素都有一个属性“fill”。您可以更改属性的值并指向您喜欢的任何颜色。在上面的例子中我将其设置为 fill="red" 这是一个在 Bootstrap 5+ 上适合我的 css 解决方案。 .bootstrap-table .fixed-table-container .table thead th .both { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIAAwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAToAMABAAAAAEAAAATAAAAADKyfrgAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kr+UDfAAAAYZJREFUOBHVUztIA0EQndk7SCJEMbWlNiltrdJJ8AMigqWiQZSIIKRSFBQLQYgJFn5jZ6EoKgatFCSFha2FxEatE9QiiSY7zooHl3MvaSx0Ydid92Ye8wYW4K8erDdY5DTSUJHepddSILY/MP9eq17UIhVXBt8EChhv8uVG69XWnGwoHQ0aEi+IsIWFsoYhOzfCyQc3UdfJiBVEBae/hVR/a7ksJhXuJma4EU/t+ZBAnGPeZ9UgQvDs/vz6du/m0cLst3ay4eOYn/c0SwDN9mJ++yXATDQd9Tjwr1QrJkSxH0h0AFDRGewyVCgbfTqxX8W0yxw5mRpki7uAkl05DglepRzb6k6kHAxobfrMyiEiXQKg90egzEjpPXAKqVwrlgwnS0wsMv9mb2IbeZKwsNO7XIVbNVoxRa53xTNEUGWFgI62e1avrGbn7SqG7NM0ZYIbsqqJ02dp0IrCnSJW7iqmCtTXQaA4x4ckTKTCyTurUXebOtCOvRQCm42eXJspCmt2/H+9PwELW4FbScq8QAAAAABJRU5ErkJggg=='); } .bootstrap-table .fixed-table-container .table thead th .desc { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= '); } .bootstrap-table .fixed-table-container .table thead th .asc { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg=='); } 这会将箭头的颜色更改为绿色。

javascript css bootstrap-4 nuxt.js bootstrap-vue

回答 2 投票 0

无法使用 npm init nuxt-app nuxt-hello-world 创建新的 nuxt 问题

nuxt.js

回答 1 投票 0

nuxt.js 相关问题

最新问题