`import VueEllipseProgress from 'vue-ellipse-progress';
export default {
components: {
VueEllipseProgress
}
}`
document is not defined error when everytime this is running
i also checked to remove server side rendering and same also
Here an example how you can include vue-ellipse-progress globally to your project.
plugins/vue-ellipse-progress.js Create plugin.
import Vue from 'vue';
import VueEllipseProgress from "vue-ellipse-progress";
Vue.use(VueEllipseProgress);
nuxt.config.js Include plugin in config.
plugins: [
{
src: '#/plugins/vue-ellipse-progress.js',
mode: 'client'
},
],
your-component.vue Use component.
<client-only>
<vue-ellipse-progress :progress="50" />
</client-only>
The official guide for nuxt plugins https://nuxtjs.org/docs/2.x/directory-structure/plugins
Related
I am creating a library that wraps Vuetify 3 components. But when I try to use the library it gives the following error:
[Vue warn]: Failed to resolve component: v-btn If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Library vite.config.ts :
import { fileURLToPath, URL } from 'node:url';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import vueJsx from '#vitejs/plugin-vue-jsx';
import vuetify from 'vite-plugin-vuetify';
export default defineConfig({
plugins: [
vue(),
vueJsx(),
// vuetify({ autoImport: true, styles: 'none' }), // Don't export vuetify
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
},
},
build: {
lib: {
entry: resolve(__dirname, 'src/main.ts'),
name: '#my/ui',
// the proper extensions will be added
fileName: 'my-ui',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue', 'vuetify'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
vuetify: 'Vuetify',
},
},
},
},
});
Nuxt project nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt';
import vuetify from 'vite-plugin-vuetify';
export default defineNuxtConfig({
css: ['#/assets/css/main.css'],
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
config.plugins.push(vuetify({ autoImport: true }))
);
},
],
build: {
transpile: ['#my/ui', 'vuetify'],
},
});
Nuxt project app.vue:
<template>
<v-app>
<v-main>
<HelloWorld label="Test" primary />
</v-main>
</v-app>
</template>
<script lang="ts" setup>
import { HelloWorld } from '#my/ui';
</script>
Nuxt project plugin vuetify.ts:
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
// components, if imported components getting resolved but treeshaking doesn't work.
// directives
});
nuxtApp.vueApp.use(vuetify);
});
Expected Behavior
Vuetify components from the Library project should be auto imported.
Current workaround:
If the vuetify components are imported in the parent project then the components are resolved. But this causes issue as the library users has to know what to import or import on global which is creating larger bundle size.
Is there an alternative way to implement and meet the following criteria:
Wrapping module doesn't depend on vuetify (Peer dep only)
Consuming app can auto import and get all of the benefits of tree shaking
Consuming app doesn't need to import any of the peer dependencies of the wrapping module.
Thank you so much in advance.
Just to create an answer for the workaround Sasank described:
If you just want to get rid of the error, import the components into the parent project as described in this link: https://next.vuetifyjs.com/en/features/treeshaking/#manual-imports
In my nuxt.js project I am using a component from a Vue library called vue-tailwind.
I import the library as a plugin in this way (as advised by the author):
/plugins/vue-tailwind.js
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
Vue.use(VueTailwind)
/nuxt.config.js
plugins: ['~plugins/vue-tailwind']
and the component works perfectly in development.
My problem is that the component is not rendered when I serve the app generated with
nuxt generate
I already tried to load the plugin this way:
{ src: '~plugins/vue-tailwind', mode: 'client' }
and also tried to put the component between client-only tag
<client-only>
<t-datepicker
v-model="date"
:max-date="today"
placeholder="Select a date"
date-format="Y-m-d"
user-format="d-M-Y"
/>
</client-only>
After several attempt, I understood that the component has to be registered in the plugin. Vue.use does not work in generated code.
My final working code is the following:
/plugins/vue-tailwind.js
import Vue from 'vue'
import { TDatepicker } from 'vue-tailwind/dist/components';
Vue.component('t-datepicker', TDatepicker)
I've got the same problem and that could be fixed by setting ssr: false in the nuxt.config.js
export default {
ssr: false,
target: 'static'
}
I am trying to use vue-dragscroll with nuxtjs.
I am new to nuxtjs and I have been using vue-dragscroll before with regular vuejs.
I have been shown an error Window is not defined, I've looked at the vue-dragscroll documentation and I still couldn't find the solution.
This is how I implemented the vue-dragscroll
<template lang="pug">
div
CountriesSearch.mb-2
div#countryList(v-for="country in countries" :key="country.country" v-dragscroll)
CountryItem(:country="country" v-if="country.Country")
</template>
<script>
import { dragscroll } from 'vue-dragscroll'
export default {
directives: {
dragscroll
},
You will have to declare it as a directive within a plugin file.
// plugins/vue-dragscroll.js
import Vue from 'vue'
import { dragscroll } from 'vue-dragscroll'
Vue.directive('dragscroll', dragscroll)
Then, in your nuxt.config.js add that plugin file to your plugins: [] array:
{ src: '#/plugins/vue-dragscroll.js', ssr: false }
This directive leverages the window which is unavailable during SSR, hence your error.
I have component I install from npm
it called vue-3d-model
I create a file like this ~/plugins/ModelGltf.js
import Vue from 'vue';
import { ModelGltf } from 'vue-3d-model';
Vue.use(ModelGltf)
and then I register it in nuxt.config.js
plugins: [
{ src: '~/plugins/ModelGlft.js', ssr: false },
],
and I called in my component like <model-gltf> ...........
but it was not rendering, in my console terminal it called Critical dependency: the request of a dependency is an expression and in my inspect it said <model-gltf> component is not register yet
I have been saw some question on stack overflow and tried their answers , still can't work
try to this,
in your ~/plugins/ModelGltf.js
import Vue from 'vue';
import { ModelGltf } from 'vue-3d-model';
Vue.component('ModelGltf', ModelGltf)
and then I register it in nuxt.config.js
{ src: '~/plugins/ModelGlft.js', ssr: false },
or
{ src: '#/plugins/ModelGlft.js', ssr: false },
I'm a new vuejs developer. I have study vueje for a while and now I decided to develop a project using vuejs.
So I learn about nuxtjs which is server side rendering. everything goes well. I can use bootstrap4 with my project.
Now I would like to use flickity carousel https://flickity.metafizzy.co on my project and I found that there is a vuejs package on https://github.com/drewjbartlett/vue-flickity
I follow the instruction how to install this component to my project by
npm install vue-flickity --save
and put on some code
<script>
import Logo from '~/components/Logo.vue'
import Searchbar from '~/components/Searchbar.vue'
import axios from 'axios'
import Flickity from 'vue-flickity';
export default {
data () {
return {
has_location: false,
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true
}
}
},
components: {
Logo,
Searchbar,
Flickity
}
}
</script>
but it show window is not defined
I have try this with another component like google map, it's show the same error.
Please tell me what wrong did I do and how to install new component to the project.
Thank you.
Nuxt.js use SSR to render your website server side, therefore window object is not accessible on node.js environment.
What you need to do is use the built-in no-ssr component to prevent Nuxt.js to render it on the server side.
You can simply do this:
<no-ssr>
<Flickity :options="...">
<!-- slides -->
</Flickity>
</no-ssr>
UPDATE: If you still get an error at this point, then load Flickity in
a custom Plugin that you will load with ssr disabled
Create a file named plugins/VueFlickity.js
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
Then in your nuxt.config.js your add:
module.exports = {
// ...
plugins: [
{ src: '~/plugins/VueFlickity.js', ssr: false }
]
}
Don't forget to remove the Flickity local component registration:
components: {
Logo,
Searchbar
// Flickity <-- remove this line
}
This was tested and is now fully working.
I fixed it with:
let Flickity = {};
if (process.browser) {
Flickity = require('flickity.js');
}
#rayfranco pointed a great way.:) The thing is that by doing this in that way You're importing this plugin globally, but not as local component which is better for performance.
So You can do it also like this:
let Flickity;
if (process.client) {
Flickity = require('vue-flickity')
}
export default {
components: {
Flickity
}
}
and use this component this way:
Important: <no-ssr>......</no-ssr> is deprecated in Nuxt > 2.9, so use
<client-only>
<Flickity :options="...">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
</Flickity>
</client-only>
you can also look into brief example by Josh Deltener
https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/