nuxt.js 相关问题

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

如何添加动画并在表格中闪烁新添加的行，同时保持所有其他行样式不变？

我在基于 Nuxt 3 或 Vue 3 的应用程序中使用 HTML 表，并通过单击按钮向其中添加一行。当我添加新行时，我想添加一种过渡/动画，以便...

css vue.js animation nuxt.js tailwind-css

回答 1 投票 0

如何在组件中可用的defineNuxtModule中配置全局sass变量？

我希望在defineNuxtModule中为我的组件创建全局sass变量（Nuxt 3）我正在使用 Nuxt 3，现在尝试制作自己的模块。但我不明白如何为我的

sass nuxt.js nuxt3

回答 1 投票 0

在具有单独登录布局的 Nuxt 3 中间件中导航后布局未更新

我在 Nuxt 3 中遇到一个问题，即在中间件中导航后布局无法正确更新，特别是在登录页面和其他页面使用单独的布局时。这是一个概述...

vue.js nuxt.js vuejs3 nuxtjs3

回答 1 投票 0

多次“useFetch”调用会导致错误 Nuxt3

我创建了一个 vueJS 组件并且运行良好。当我现在在我的标签中添加第二个“useFetch”调用时，它导致了以下错误消息：需要 </desc> 的可组合项 <question vote="0"> <p>我创建了一个 vueJS 组件并且运行良好。当我现在在我的 <pre><code><script setup></code></pre> 标签中添加第二个“useFetch”调用时，它导致了此错误消息：</p> <pre><code>A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`. at Module.useNuxtApp (/Users/user/Code/Personal/universityCheckIn/node_modules/nuxt/dist/app/nuxt.js:216:13) at Module.useAsyncData (/Users/user/Code/Personal/universityCheckIn/node_modules/nuxt/dist/app/composables/asyncData.js:26:38) at Module.useFetch (/Users/user/Code/Personal/universityCheckIn/node_modules/nuxt/dist/app/composables/fetch.js:63:43) at checkIfCheckedIn (/Users/user/Code/Personal/universityCheckIn/pages/check-in.vue:51:50) at init (/Users/user/Code/Personal/universityCheckIn/pages/check-in.vue:75:30) </code></pre> <p>我的<pre><code><script setup></code></pre>部分，相关的看起来像这样：</p> <pre><code><script setup> // General Values const alreadyCheckedIn = ref(false); const showModal = ref(false); const lecture = ref(null); // Modal Values const lectureName = ref(""); const startTime = ref(""); // Error handling const displayError = ref(false); const errorMessage = ref("Please fill in all fields."); // Fetch lecture data async function fetchLectureData() { const lectureDateObj = new Date(); const lectureDateStr = lectureDateObj.toISOString().split("T")[0]; const { data } = await useFetch("/api/lecture", { method: "GET", query: { lectureDate: lectureDateStr, groupId: 1, //TODO: get the group id from the user }, }); if (data.value.statusCode === 404) { return; } return data.value.body ? await JSON.parse(data.value.body) : null; } async function checkIfCheckedIn() { const lectureDateObj = new Date(); const lectureDateStr = lectureDateObj.toISOString().split("T")[0]; const { data } = await useFetch("/api/check-in", { method: "GET", query: { lectureDate: lectureDateStr, userId: 1, //TODO: get the user id from the user groupId: 1, //TODO: get the group id from the user }, }); if (data.value.statusCode === 404) { return false; } return true; } // Initialize lecture data async function init() { const lectureFromDB = await fetchLectureData(); if (lectureFromDB) { lecture.value = lectureFromDB; lecture.value.start_time = new Date( lecture.value.start_time ).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" }); } alreadyCheckedIn.value = await checkIfCheckedIn(); } init(); . . . </code></pre> <p><pre><code>fetchLectureData()</code></pre>功能首先出现，一切正常。然后我添加了 <pre><code>checkIfCheckedIn()</code></pre> 函数，抛出了所描述的错误。</p> <p>我尝试了它是否依赖于 <pre><code>checkIfCheckedIn()</code></pre> 函数并删除了 <pre><code>fetchLectureData()</code></pre> 函数（因此只有一个“useFetch”调用存在”）并且一切都再次正常。所以问题不依赖于函数本身，而是依赖于事实上有两个“useFetch”调用。</p> <p>如果我尝试使用“useFetch”的方式不可能，我如何在加载页面时进行两个独立的API调用？</p> </question> <answer tick="false" vote="0"> <p>解决了！我在文档中发现以下内容“最重要的是，您必须同步使用它们 - 也就是说，在调用可组合的 [...] 之前不能使用等待”</p> <p>因此，因为两者都是异步操作，其中一个操作会阻塞另一个操作，所以我在可组合项之前调用“await”，这会导致错误。我使用以下方法来避免在另一个 useFetch 之前调用一个 wait：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>Promise.all([fetchLectureData(), checkIfCheckedIn()]) .then(([lectureFromDB, checkedIn]) => { if (lectureFromDB) { lecture.value = lectureFromDB; lecture.value.start_time = new Date( lecture.value.start_time ).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" }); } alreadyCheckedIn.value = checkedIn; }) .catch((error) => { console.error(error); });</code></pre> </div> </div> <p></p> </answer> </body></html>

javascript vue.js vuejs3 nuxt.js nuxt3

回答 0 投票 0

如何配置 NGINX 以在 Docker 容器中为 Directus 提供 Nuxt 3 应用程序服务

我有一个运行 3 个服务的 Docker 容器：NGINX、Nuxt3 和 Directus 10.8。我正在努力让反向代理正常工作。我可以成功地将 Nuxt 映射到“/”，但我很沮丧......

docker docker-compose nuxt.js nginx-reverse-proxy directus

回答 1 投票 0

Nuxt：useFetch 调用给出错误的返回类型

我想这个问题的答案可能很简单，但我不知道该怎么做。我的pages/auth/login.vue中有以下代码：异步登录() { 尝试 { const { 数据 } = 等待

vue.js nuxt.js nuxtjs3

回答 2 投票 0

nuxt3 .nojekyll 无法在 Github 页面上运行

当我想将 nuxt 项目部署到 github 页面时遇到一些麻烦。我已经在public文件夹下添加了.nojekyll文件，但是运行generate后，带“_”的文件仍然是...

vue.js nuxt.js github-pages

回答 1 投票 0

导致错误的原因是找不到名称“useSupabaseClient”。当使用 Nuxt 3 和 Supabase 时？

使用 npm 我已经安装了 Nuxt 3 和 Supabase，但在 vs code 中我不断收到以下错误；找不到名称“useSupabaseClient”。当我运行 npm run dev 时，我收到以下错误消息...

nuxt.js supabase supabase-database supabase-js

回答 1 投票 0

为什么useAsyncData不能在Nuxt3中的SSR上工作

我从 Nuxt2 迁移到 Nuxt3，并且在 SSR API 调用方面遇到了困难。我想在SSR上执行API调用，但API是在客户端调用的并且在网络中可见。在 Nuxt2 上，当我们...

vue.js nuxt.js server-side-rendering nuxt3

回答 1 投票 0

如何使用 .htaccess 在具有相同域的一台服务器上混合节点和 PHP 应用程序？

我有一个使用 OpenCart 的 PHP 应用程序，但我想将某些页面作为 Nuxt 应用程序提供服务。我想将 Nuxt 应用程序保留在单独的目录中，但仅为某些 URL 提供服务，并让 OpenCart

php node.js apache .htaccess nuxt.js

回答 1 投票 0

Milvus 2 Node.js SDK 错误：“TypeError：类扩展值未定义不是构造函数或 null”

注意：在您投反对票之前，请阅读整个问题，因为我检查了循环依赖，但没有发现任何循环依赖。我正在开发我的 Nuxt.js 应用程序。数据库我选择了Milvus。我想做一个

typescript nuxt.js milvus grpc-js

回答 1 投票 0

@vue/compiler-sfc 无法编译 <script setup>

我尝试使用@vue/compiler-sfc来编译.vue文件，我确实成功了，但前提是代码放在标签中，当我编译<script setup>中的代码时，结果将是... </desc> <question vote="2"> <p>我尝试使用<pre><code>@vue/compiler-sfc</code></pre>来编译<pre><code>.vue</code></pre>文件，我确实成功了，但前提是代码放在<pre><code><script></code></pre>标签中，当我编译<pre><code><script setup></code></pre>中的代码时，结果会出错。以下是我的 <pre><code>compiler.js</code></pre> 文件。在 CMD 中执行 <pre><code>node compiler.js</code></pre> 将编译并转换 <pre><code>.vue</code></pre> 文件为 <pre><code>.js</code></pre> 文件 :</p> <pre><code>// compiler.js import n_fs from 'fs'; import n_url from 'url'; import n_path from 'path'; const __filename = n_url.fileURLToPath(import.meta.url); const __dirname = n_path.dirname(__filename); import * as m_compiler from '@vue/compiler-sfc'; let filePath = n_path.resolve(__dirname, './Counter.vue'); let fileContent = n_fs.readFileSync(filePath, 'utf8'); let fileName = n_path.parse(filePath).name; function transformVueSFC(source, filename){ let {descriptor, errors, } = m_compiler.parse(source, {filename:filename, }); if(errors.length !== 0){ throw new Error(errors.toString()) }; let id = Math.random().toString(36).slice(2, 12); let hasScoped = descriptor.styles.some(function(e){ return e.scoped }); let scopeId = hasScoped ? `data-v-${id}` : undefined; let templateOptions = { sourceMap : false, filename : descriptor.filename + '.vue', id : id, scoped : hasScoped, slotted : descriptor.slotted, source : descriptor.template.content, compilerOptions : { scopeId : hasScoped ? scopeId : undefined, mode : 'module', }, }; let script = m_compiler.compileScript(descriptor, {id, templateOptions, }); let template = m_compiler.compileTemplate({...templateOptions, }); let renderString = ''; let startString = script.content.includes( 'const __default__ = {') ? 'const __default__ = {' : 'export default {'; renderString = template.code.match(/export function render$_ctx, _cache$ {([\s\S]+)/)[0]; renderString = renderString.replace('export function render(_ctx, _cache)', 'render(_ctx, _cache)'); template.code = template.code.replace(/export function render$_ctx, _cache$ {([\s\S]+)/, ''); script.content = script.content.replace(startString, function(){ return ( startString + "\n"+ renderString +",\n" + "__scopeId : '" + scopeId + "',\n" + "__file : '" + fileName + "',\n" ); }); let insertStyles = ''; if(descriptor.styles){ let styled = descriptor.styles.map(function(style){ return m_compiler.compileStyle({id, source:style.content, scoped:style.scoped, preprocessLang:style.lang, }); }); if(styled.length){ let cssCode = styled.map(function(s){ return `${s.code}` }).join('\n'); insertStyles = ( "(function(){\n" + "let styleTag = document.createElement('style');\n" + "styleTag.setAttribute('data-v-"+ filename +"', '');\n" + "styleTag.innerHTML = `"+ cssCode +"`;\n" + "document.head.appendChild(styleTag);\n" + '})();' ); }; }; let jsFile01 = __dirname + '/'+ fileName + '.js'; let jsFile01Content = (insertStyles +'\n\n\n\n'+ template.code +'\n\n\n\n'+ script.content); jsFile01Content = jsFile01Content.replace(/\n{4,}/g, '\n\n\n\n').trim(); n_fs.writeFile(jsFile01, jsFile01Content, {flag:'w', }, function(error){ if(error){ return console.error(error) }; console.log('✔ : '+ jsFile01); }); }; transformVueSFC(fileContent, fileName); </code></pre> <p>以下是我的<pre><code>Counter.vue</code></pre>文件，与<pre><code>compiler.vue</code></pre>文件在同一目录下。如果按照传统方式编写，编译结果可以顺利运行，<pre><code>counter.js</code></pre>文件可以在浏览器中执行，但是如果是<pre><code><script setup></code></pre>，浏览器会报错：</p> <pre><code> <template> <button type="button" @click="count++">{{ count }}</button> </template> <script setup> import { ref } from 'vue'; const count = ref(0); </script> </code></pre> <p>这是<pre><code>Counter.js</code></pre>的编译结果：</p> <pre><code>// Counterjs import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue" import { ref } from 'vue'; export default { render(_ctx, _cache) { return (_openBlock(), _createElementBlock("button", { type: "button", onClick: _cache[0] || (_cache[0] = $event => (_ctx.count++)) }, _toDisplayString(_ctx.count), 1 /* TEXT */)) }, __scopeId : 'undefined', __file : 'Counter', setup(__props, { expose: __expose }) { __expose(); const count = ref(0); const __returned__ = { count, ref } Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true }) return __returned__ } } </code></pre> <p>这是我在html中使用的编译后的<pre><code>Counter.js</code></pre>文件，DevTool会报错，显示<pre><code>vue.esm-browser.js:1513 [Vue warn]: Property "count" was accessed during render but is not defined on instance.</code></pre>和<pre><code>vue.esm-browser.js:1513 [Vue warn]: Cannot mutate <script setup> binding "count" from Options API.</code></pre>：</p> <pre><code> <script async src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="5134227c3c3e35243d347c2239383c2211607f677f62">[email protected]</a>/dist/es-module-shims.min.js"></script> <script type="importmap">{ "imports":{ "vue":"https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="bec8cbdbfe8d908d908a">[email protected]</a>/dist/vue.esm-browser.js" } }</script> <div id="app01"> <Counter></Counter> </div> <script type="module"> import * as Vue from 'vue'; import Counter from './Counter.js'; let vc01 = Vue.createApp({ components : { 'Counter' : Counter, }, }); let vi01 = vc01.mount('#app01'); </script> </code></pre> <p>我已经在这个编译问题上挣扎了很长时间，试图自己解决它，但惨败，我真的希望有人能帮助我，谢谢。 😁😁😁</p> <hr/> <p>后来参考了Vue的官方demo，发现在相同的文件内容下，编译出来的结果和我的很像，只不过它的<pre><code>render</code></pre>函数多了<pre><code>$props, $setup, $data, $options</code></pre>这四个参数，而且它没有使用<pre> <code>_ctx.count</code></pre>，但是使用<pre><code>$setup.count</code></pre>，我修改后代码可以运行，修改后的<pre><code>Counter.js</code></pre>如下，但不知道为什么编译会有这两种不同的结果。</p> <pre><code>// Counter.js import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue" import { ref } from 'vue'; export default { render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("button", { type: "button", onClick: _cache[0] || (_cache[0] = $event => ($setup.count++)) }, _toDisplayString($setup.count), 1 /* TEXT */)) }, __scopeId : 'undefined', __file : 'Counter', setup(__props, { expose: __expose }) { __expose(); const count = ref(0); const __returned__ = { count, ref } Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true }) return __returned__ } } </code></pre> </question> <answer tick="false" vote="0"> <p>这个问题你解决了吗？我也面临同样的问题，不知道如何使用设置糖渲染 vue 组件，</p> </answer> </body></html>

vue.js nuxt.js vite vue-sfc

回答 0 投票 0

使用 run dev 时找不到模块“pinia/dist/pinia.mjs”

我在新的 Nuxt3 应用程序之上设置 Pinia 并启动开发服务器，按顺序使用以下命令： npx nuxi 初始化 nuxt-app cd nuxt 应用程序 npm 安装 npm 安装@pinia/nuxt npm 运行开发开发服务器运行

vue.js nuxt.js nuxtjs3 pinia

回答 5 投票 0

如何在 Nuxt 中完全加载页面之前填充元标记？和 <Meta>）。然而，似乎当从 Firestore 检索文章数据时，页面已加载，元标记暂时为空。虽然是临时的，但由于请求被视为完成，所以在Postman上测试时meta标签被认为是空的。 SSR 设置为 true。如果可能的话，我更喜欢使用选项 API。</p> <p>是否有一种解决方案允许在页面加载之前使用从 Firestore 获取的数据填充元标记？</p> <p>我尝试使用 SSR 设置并将 <pre><code>beforeMount()</code></pre> 中的代码移动到 <pre><code>created()</code></pre> 和 <pre><code>mounted()</code></pre> ，但没有运气。我是 Nuxt 的新手，如果你能帮助我那就太好了。</p> <p>/pages/app/[id].vue</p> <pre><code> <script> export default { name: "AppPage", data() { return { title: "", catchphrase: "", images: [], description: "", owner: "", url: "", isOwner: false, }; }, async beforeMount() { const auth = getAuth(); const id = this.$route.params.id; const docRef = await doc(this.$db, "apps", id); getDoc(docRef).then(async (doc) => { if (doc.exists()) { const data = doc.data(); this.title = data.title; this.catchphrase = data.catchphrase; this.images = data.images; this.description = data.description; this.owner = await (await getDoc(data.owner)).data(); this.url = data.url; auth.onAuthStateChanged((user) => { if (user) { if (user.uid === this.owner.id) { this.isOwner = true; } } }); } else { console.log("No such document!"); } }); } } </script> <template> <Head> <Title>{{ title }}</Title> <Meta name="description" :content="catchphrase"/> <Meta property="og:title" :content="title"/> <Meta property="og:description" :content="catchphrase"/> <Meta property="og:image" :content="images[0]"/> <Meta property="og:url" :content="url"/> <Meta property="og:type" content="website"/> <Meta property="og:site_name" content="Circle4Devs"/> <Meta name="twitter:card" content="summary_large_image"/> <Meta name="twitter:site" content="@Circle4Devs"/> <Meta name="twitter:title" :content="title"/> <Meta name="twitter:description" :content="catchphrase"/> <Meta name="twitter:image" :content="images[0]"/> </Head> <div id="article"> ... </div> </code></pre> <p>这是邮递员的回复。元标签为空</p> <p><img src="https://cdn.txt58.com/i/AWkuaW1ndXIuY29tL211Zng1UEkucG5n" alt="image"/></p> <p>这是页面加载后浏览器给出的响应。这里的元标签已填充。</p> <p><img src="https://cdn.txt58.com/i/AWkuaW1ndXIuY29tL2xjamVUaW0ucG5n" alt="image"/></p> </question> <answer tick="false" vote="0"> <p>您可以使用 <pre><code>useHead</code></pre> 可组合项</p> <pre><code>useHead({ title: "My page with ads", // or, instead: // titleTemplate: (title) => `My App - ${title}`, viewport: "width=device-width, initial-scale=1, maximum-scale=1", charset: "utf-8", meta: [{ name: "description", content: "My amazing site." }] }) </code></pre> <p>您也可以使用 <pre><code>useSeoMeta</code></pre> 可组合项：</p> <pre><code>useSeoMeta({ description: 'My about page', ogDescription: 'Still about my about page', ogTitle: 'About', ogImage: '<>', twitterCard: 'summary_large_image', }) </code></pre> <p>甚至，出于性能原因，<pre><code>useServerSeoMeta</code></pre>：</p> <pre><code>useServerSeoMeta({ robots: 'index, follow' }) </code></pre> <p>您应该将它们放在您的 <pre><code><script></code></pre> 标签内，并且不需要导入任何内容。</p> <p>来源：</p> <p><a href="https://nuxt.com/docs/api/composables/use-head" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-head</a></p> <p><a href="https://nuxt.com/docs/api/composables/use-seo-meta" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-seo-meta</a></p> <p><a href="https://nuxt.com/docs/api/composables/use-server-seo-meta" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-server-seo-meta</a></p> </answer> </body></html>

我有一个 Nuxt3 应用程序，其中使用作为路径变量传递的 ID 从 Firestore 加载博客文章。为了使我的网站对 SEO 更友好，我想填充 Nuxt 标题和元标记...

firebase vue.js google-cloud-firestore nuxt.js

回答 0 投票 0

NuxtLink 的子级渲染两次（水合错误？）

我的直觉是，存在一些水合不匹配，其中 FontAwesomeIcon 未在服务器上渲染（仅跨度），然后在客户端上渲染 NuxtLink 的两个子节点（...

vue.js nuxt.js server-side-rendering mismatch hydration

回答 2 投票 0

Vuetify 使用 nuxt i18n 规则消息翻译

我想在 Vuetify 验证失败时显示翻译后的规则消息模板部分我想在 Vuetify 验证失败时显示翻译后的规则消息模板部分 <v-text-field v-model="message.name" outlined :label="$t('page.contact.form.name')" :rules=nameValidationRules ></v-text-field> 脚本部分 const nameValidationRules = ref([requiredRule, blankValidator]) 验证器规则保存在“validationRules.ts”中 export const requiredRule = (value: any): string | boolean => !!value || 'This field is required'; export const blankValidator = (value: string | null | undefined): string | boolean => !value || !!value?.trim() || 'This field cannot be blank.'; 我想用 i18n 变量替换“此字段是必填字段”。您可以将翻译功能传递给规则定义： const {t} = useI18n() const nameValidationRules = ref([requiredRule(t), blankValidator(t)]) export const requiredRule = (t: any) => (value: any): string | boolean => !!value || t('required'); export const blankValidator = (t: any) => (value: string | null | undefined): string | boolean => !value || !!value?.trim() || t('not_blank');

vue.js nuxt.js nuxt-i18n

回答 1 投票 0

如何将Element plus与Nuxt 3集成？

我正在尝试使用Nuxt 3安装element plus。我尝试了element plus的官方文档，Element plus docs。我安装了 unplugin-vue-components unplugin-auto-import 并添加了特定...

javascript vue.js nuxt.js element-ui element-plus

回答 2 投票 0

如何在访问页面时从头开始显示v-overlay元素

我目前正在使用 Nuxt v3.9.3 和 vuetify 3.5.1 构建一个应用程序。我有一个基于下面的“ablosute”链接的实现，它在按下按钮时显示覆盖......

vue.js nuxt.js vuetify.js nuxtjs3

回答 1 投票 0

如何检查nuxt.js中是否调用了navigateTo

我正在开发一个 Nuxt.js 项目并使用 Vitest 进行单元测试。我需要验证在我的测试中是否使用特定路径调用 Nuxt.js 中的 navigatorTo 函数。这是我的相关部分

vue.js jestjs nuxt.js nuxtjs3 vitest

回答 1 投票 0

Nuxt 3 和 Vue 3 onMounted 调用函数 useFetch 函数未从 API 获取数据

嗨，我是 Nuxt 和 Vue 的新手。我正在使用 Nuxt 框架从 API 获取数据。我想在 onMounted 方法调用时从 API 获取数据。我创建了 saprate 函数来调用 api。该 api 通过

javascript vue.js nuxt.js vuejs3 nuxt3

回答 2 投票 0

nuxt.js 相关问题

最新问题