[Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
2023-09-14 09:00:51 时间
You can isolate parts of templates you want to re-use into components, but you can also reuse those components across pages using layouts. This lesson walks you through creation a navigation component then extracting it out into the default layout.
layout/default.vue:
<template> <div> <navigation></navigation> <nuxt/> </div> </template> <script> import navigation from '~components/navigation' export default { components: { navigation } } </script>
相关文章
- vue.js响应式原理解析与实现
- vue axios的使用
- [Vue @Component] Dynamic Vue.js Components with the component element
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- vue.js 3.2.22:用useIntersectionObserver监控多行数据的可见性(@vueuse/core@7.0.3)
- 部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
- vue.js 入门精要
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
- [Vue] Use Vue.js Component Computed Properties
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- vue.js3: 项目打包后部署到网站子目录(vue@3.2.33)
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- vuejs单文件组件:安装 webpack 和 vue-cli
- vue.js学习:慕课网教程1:vue2.5入门
- SpringBoot+VUE 前端加密算法 RSA+DES
- vue.js中引入图片
- 【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能