now. i have create file ~plugins/vue-cookies.js
import Vue from 'vue'
import VueCookie from 'vue-cookie'
Vue.use(VueCookie)
in nuxt.config.js, I write
const webpack = require('webpack')
module.exports = {
dev: (process.env.NODE_ENV !== 'production'),
/**
* Let you define all default meta for your application inside
*/
head: {
title: 'MyWork',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'}
],
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
},
/**
* Uses its own component to show a progress bar between the routes.
* You can customize it, disable it or create your own component.
*/
loading: false,
/**
* Use lru-cache to allow cached components for better render performances
* */
cache: {
max: 1000,
maxAge: 900000
},
/**
* Build configuration
*/
build: {
/**
* Run ESLINT on save
*/
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
plugins: [
// Automatically load plugin instead of having to import or require them everywhere.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
// Lets you add modules inside the vendor.bundle.js file generated to reduce the size of the app bundle.
// It's really useful when using external modules.
vendor: ['axios', 'vue-cookie', 'vue-notifications']
},
/**
* Lets you define the CSS you want to set globally
* */
css: [
{src: 'bootstrap/dist/css/bootstrap.css'},
{src: 'bootstrap/dist/css/bootstrap-theme.css'},
{src: '~/assets/scss/custom.scss', lang: 'scss'}
],
// The plugins property lets you add vue.js plugins easily to your main application.
plugins: [
'~plugins/axios/index.js',
'~plugins/filters.js',
'~plugins/components.js',
'~plugins/bootstrap/index.js',
'~plugins/vue-cookies.js',
'~plugins/vue-notifications.js',
'~plugins/ga.js'
],
// Nuxt.js lets you create environment variables that will be shared for the client and server-side.
env: {
baseUrl: 'http://apimw.viecict.com',
serverName: 'Dao Dang Son'
}
// router: {
// extendRoutes (routes, resolve) {
// let arrayRoute = [
// {
// path: '/tuyen-dung',
// component: resolve(__dirname, 'views/tuyen-dung/index.vue'),
// name: 'listing.it'
// },
// {
// path: '/tuyen-dung/:id/:slug',
// component: resolve(__dirname, 'views/tuyen-dung/detail.vue'),
// name: 'tuyen-dung-id-slug'
// }
// ]
//
// arrayRoute.map((item) => {
// routes.push(item)
// })
// }
// }
}
But. i console.log(this.$cookies) result undefined in file ~page/index.vue
mounted () {
this.fetchData()
console.log(MwString.isExists())
},
methods: {
fetchData () {
console.log(this.$cookies)
return '1234'
}
}
who can help me ? thanks !
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1166">#c1166</a>)</em></sub></div>