Во-первых, хотя эта ошибка, скорее всего, и не вызовет этой ошибки, компонент в вашем шаблоне должен быть в кебаб-кейсе. <ag-grid-demo/>. Из vue документы
Ошибка, которую вы получаете, вероятно, связана с ssr, и хотя вы указали ssr: false в вашем nuxt.config.js, это не всегда помогает понять причину.
Не могли бы вы попробовать это:
<template>
<section class="section">
Welcome to test page
<no-ssr>
<ag-grid-demo></ag-grid-demo>
</no-ssr>
</section>
</template>
<script>
let AgGridDemo = {}
if (process.browser) {
AgGridDemo = require('~/components/AgGridDemo')
}
export default {
components: {
'ag-grid-demo': AgGridDemo
}
}
</script>
Кроме того, современный способ импорта плагинов в nuxt.config.js заключается в следующем.
plugins: [
'~/plugins/plugin-ag-grid.client.js'
//Note the .client.js This is shorthand for the following which you can also use
src: { '~/plugins/plugin-ag-grid.js', mode: client }
]
Использование ssr: false будет устаревшим в следующем основном выпуске. См документы
Редактировать
Если это все еще вызывает ошибки, вам может понадобиться добавить плагин к build-transpile в nuxt.config.js. Вот так:
build: {
...
transpile: [
'/plugins',
],
}
Это перенесет все ваши плагины, но посмотрим, как вы пойдете. К сожалению, документы не дают нам много об этом.
Если вы не можете заставить это работать, старомодный подход заключался в добавлении компонента в белый список, например:
//nuxt.config.js
const nodeExternals = require('webpack-node-externals')
module.exports = {
/*
** All other config code
*/
build: {
extend(config, ctx) {
if (ctx.isServer) {
config.externals = [
nodeExternals({
whitelist: [/^@components\\AgGridDemo.vue/]
// or however you regex a windows path
})
]
}
}
}
}