Я хочу использовать этот пакет nuxt-cookie-consent:
Я использую Nuxt 3.3.1
Здесь также есть пример игровой площадки о том, как использовать зависимость: https://stackblitz.com/github/dargmuesli/nuxt-cookie-control?file=playground%2Fapp.vue
Как указано в README.md, я установил пакет и изменил свой nuxt.config.ts на это:
// nuxt.config.ts
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
ssr: true,
css: [
'vuetify/styles',
'@mdi/font/css/materialdesignicons.min.css',
],
vite: {
// @ts-ignore
// curently this will lead to a type error, but hopefully will be fixed soon #justBetaThings
ssr: {
noExternal: ['vuetify'], // add the vuetify vite plugin
},
},
build: {
transpile: ['vuetify'],
},
modules: [
async (options, nuxt) => {
// @ts-ignore
nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
vuetify()
))
},
['nuxt-cookie-control', {
//default css (true)
//if css is set to false, you will still be able to access
//your color variables (example. background-color: var(--cookie-control-barBackground))
css: true,
//enable or disable css variables polyfill
cssPolyfill: true,
//in case you have subdomains (shop.yourdomain.com)
domain: 'yourdomain.com',
//if you want to tree-shake locales set locales you want to use
locales: ['en', 'de'],
//modal opener (cookie control)
controlButton: true,
//block iframes to prevent them from adding additional cookies
blockIframe: true,
//position of cookie bar:
//'top-left', 'top-right', 'top-full',
//'bottom-left', 'bottom-right', 'bottom-full'
barPosition: 'bottom-full',
dashInDescription: true,
//default colors
//if you want to disable colors set colors property to false
colors: {
barTextColor: '#fff',
modalOverlay: '#000',
barBackground: '#000',
barButtonColor: '#000',
modalTextColor: '#000',
modalBackground: '#fff',
modalOverlayOpacity: 0.8,
modalButtonColor: '#fff',
modalUnsavedColor: '#fff',
barButtonHoverColor: '#fff',
barButtonBackground: '#fff',
modalButtonHoverColor: '#fff',
modalButtonBackground: '#000',
controlButtonIconColor: '#000',
controlButtonBackground: '#fff',
barButtonHoverBackground: '#333',
checkboxActiveBackground: '#000',
checkboxInactiveBackground: '#000',
modalButtonHoverBackground: '#333',
checkboxDisabledBackground: '#ddd',
controlButtonIconHoverColor: '#fff',
controlButtonHoverBackground: '#000',
checkboxActiveCircleBackground: '#fff',
checkboxInactiveCircleBackground: '#fff',
checkboxDisabledCircleBackground: '#fff',
},
//default texts
text: {
barTitle: 'Cookies',
barDescription: 'We use our own cookies and third-party cookies so that we can show you this website and better understand how you use it, with a view to improving the services we offer. If you continue browsing, we consider that you have accepted the cookies.',
acceptAll: 'Accept all',
declineAll: 'Delete all',
manageCookies: 'Manage cookies',
unsaved: 'You have unsaved settings',
close: 'Close',
save: 'Save',
necessary: 'Necessary cookies',
optional: 'Optional cookies',
functional: 'Functional cookies',
blockedIframe: 'To see this, please enable functional cookies',
here: 'here'
}
}]
],
head: {
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Lato&display=swap",
},
],
},
})
Я также изменил свой app.vue на это:
При запуске моего приложения оно говорит, что не может найти модуль nuxt-cookie-control, но он указан в зависимостях:
Что я делаю неправильно, и почему он не может найти модуль, хотя он установлен как зависимость? Спасибо!
Загляните на детскую площадку; обязательно используйте полное имя модуля:
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: [
'@dargmuesli/nuxt-cookie-control'
],
cookieControl: {
// options
}
}
О боже, я сделал простую ошибку... Спасибо!