Static GitHub Issues

[1319] Hi every one ! how do import vue-cookie pllugin (npm install vue-cookie --save) in nuxt js.

prev: Make vue-svgicon work correctly with Nuxt
next: scss autoprefixer problem

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>