質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

847閲覧

Nuxtで、ant-design-vueがレンダリングされません

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/02/25 09:25

編集2019/02/25 09:27

Nuxtjsで、ant-design-vueを使用したいのですが、ant-designのコンポーネントが、通常のHTMLとしてレンダリングされません。
(一瞬だけ表示されてすぐに消えます)

▼HTML上にこのままレンダリングされる
<a-avatar data-v-1a9bb128="" icon="user"></a-avatar>

コンソールエラーが発生し、レンダリングが正常に行えない状況です。

shell

1[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 2[Vue warn]: Unknown custom element: <a-avatar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

HTMLへ通常のHTMLDOMとしてレンダリングし、表示を成功させたいです。
Githubを漁りましたが、有力な方法がなく・・ご教授のほどよろしくお願いいたします。

●header.vue(表示させたいVue情報)

vue

1<template> 2 <header class="header"> 3 <div class="header__logo"> 4 <img class="header__logo-img" src="@/assets/img/common/logo.png" alt="HEATSYSTEM"/> 5 </div> 6 <div class="header__menu"> 7 <div class="header__menu-icon"> 8 <span>admin01</span> 9 <template slot="name" slot-scope="text, record"> 10 <a-avatar icon="user"/> 11 </template> 12 </div> 13 </div> 14 </header> 15</template> 16 17<script> 18 export default { 19 name: 'Header', 20 components: {} 21 } 22</script> 23 24<style lang="scss" scoped> 25... 26</style> 27 28

●package.json

json

1{ 2 "name": "nuxt-ssr-firebase-source", 3 "scripts": { 4 "dev": "nuxt", 5 "build": "nuxt build", 6 "start": "nuxt start", 7 "generate": "nuxt generate", 8 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 9 "precommit": "npm run lint" 10 }, 11 "dependencies": { 12 "ant-design-vue": "^1.3.5", 13 "babel-plugin-module-resolver": "^2.7.1", 14 "babel-plugin-transform-runtime": "^6.23.0", 15 "babel-preset-es2015": "^6.24.1", 16 "babel-preset-stage-0": "^6.24.1", 17 "cross-env": "^5.2.0", 18 "node-sass": "^4.11.0", 19 "nuxt": "^1.0.0", 20 "nuxt-sass-resources-loader": "^2.0.5", 21 "sass-loader": "^7.1.0" 22 }, 23 "devDependencies": { 24 "babel-eslint": "^7.2.3", 25 "babel-plugin-transform-runtime": "^6.23.0", 26 "eslint": "^4.3.0", 27 "eslint-config-standard": "^10.2.1", 28 "eslint-loader": "^1.9.0", 29 "eslint-plugin-html": "^3.1.1", 30 "eslint-plugin-import": "^2.7.0", 31 "eslint-plugin-node": "^5.1.1", 32 "eslint-plugin-promise": "^3.5.0", 33 "eslint-plugin-standard": "^3.0.1" 34 } 35}

●nuxt.config.js

javascript

1module.exports = { 2 ssr: true, 3 mode: 'universal', 4 5 /* 6 ** Headers of the page 7 */ 8 head: { 9 title: 'Nuxtjs SSR Firebase Functions', 10 meta: [ 11 { 12 charset: 'utf-8' 13 }, 14 { 15 name: 'viewport', 16 content: 'width=device-width, initial-scale=1' 17 }, 18 { 19 hid: 'description', 20 name: 'description', 21 content: 'Nuxt.js project' 22 } 23 ], 24 link: [ 25 { 26 rel: 'icon', 27 type: 'image/x-icon', 28 href: '/favicon.ico' 29 } 30 ] 31 }, 32 33 // <script src="https://cdn.muicss.com/mui-0.9.35/js/mui.min.js"></script> 34 /* 35 ** Customize the progress bar color 36 */ 37 loading: { 38 color: '#fff' 39 }, 40 css: [ 41 'ant-design-vue/dist/antd.css', 42 { 43 src: '@/assets/styles/normalize.scss', 44 lang: 'scss' 45 } 46 ], 47 modules: [ 48 ['nuxt-sass-resources-loader', [ 49 '~/assets/styles/global.scss', 50 ]], 51 ], 52 53 /* 54 ** Plugins to load before mounting the App 55 */ 56 plugins: [ 57 '@/plugins/antd-ui' 58 ], 59 60 /* 61 ** Build configuration 62 */ 63 buildDir: '../prod/server/nuxt', 64 build: { 65 publicPath: '/assets/', 66 extractCSS: true, 67 // babel: { 68 // presets: [ 69 // 'es2015', 70 // 'stage-0' 71 // ], 72 // plugins: [ 73 // ["transform-runtime", { 74 // "polyfill": true, 75 // "regenerator": true 76 // }], 77 // ] 78 // }, 79 /* 80 ** Run ESLint on save 81 */ 82 extend(config, ctx) { 83 if (ctx.isDev && ctx.isClient) { 84 // config.module.rules.push({ 85 // enforce: 'pre', 86 // test: /.(js|vue)$/, 87 // loader: 'eslint-loader', 88 // exclude: /(node_modules)/ 89 // }) 90 } 91 } 92 } 93};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

色々と触ったらできました。

投稿2019/11/12 01:52

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問