So I came to work on my project today and I got greated by this error with nuxt.js.

I removed node_modules and .nuxt folder, reissue a yarn install but I still have this error, _vm.$t is not a function.

Where does it e from?

I also got some _vm.localePath is not a function...

I made sure it was in my modules too:

modules: [
    ['nuxt-i18n', {
      locales: [
        { code: 'en', iso: 'en-US', name:'English', file: 'en-US.json' },
        { code: 'fr', iso: 'fr-FR', name:'Français', file: 'fr.js' },
        // { code: 'es', iso: 'es-ES', name:'English', file: 'es.js' }
      ],
      defaultLocale: 'en',
      // strategy: 'prefix_and_default',
      lazy: true,
      langDir: 'i18n/',
      // By default, custom routes are extracted from page files using acorn parsing,
      // set this to false to disable this
      parsePages: true,

    }],
...

Thanks!

EDIT: Here's my package.json file:

{
  "name": "myproj",
  "version": "1.0.0",
  "description": "My classy Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "premit": "npm run lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/pro-light-svg-icons": "^5.2.0",
    "@nuxtjs/axios": "^5.0.0",
    "fastify": "^1.11.0",
    "iview": "^3.0.1",
    "koa": "^2.3.0",
    "nuxt": "^1.0.0",
    "nuxt-fontawesome": "^0.3.0",
    "nuxt-i18n": "^5.2.1",
    "pg": "^7.4.3",
    "vuetify": "^1.0.19"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "cross-env": "^5.0.1",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^4.0.0",
    "nodemon": "^1.11.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  }
}

Koa and Vuetify will be replaced by fastify and iview, that is why they are there.

As spotted in the ments, nuxt is version 1.0.0 for a strange reason. I upgraded the package to nuxt 1.4.2. I still have the same issue.

Complete stack trace:

Server listening on http://127.0.0.1:3000
[Vue warn]: Property or method "localePath" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ponents, by initializing the property. See: .html#Declaring-Reactive-Properties.

found in

---> <Default> at layouts/default.vue
       <Root>
[Vue warn]: Error in render: "TypeError: _vm.localePath is not a function"

found in

---> <Default> at layouts/default.vue
       <Root>
{ TypeError: _vm.localePath is not a function
    at Proxy.render (layouts/default.vue?2d02:32:0)
    at VueComponent.Vue._render (/media/drive/srv/node/ooo/node_modules/vue/dist/vue.runtimemon.js:4542:22)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7532:25)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7656:5)
    at renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7420:5)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7538:3)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2449:12)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7646:5) statusCode: 500, name: 'TypeError' }

So I came to work on my project today and I got greated by this error with nuxt.js.

I removed node_modules and .nuxt folder, reissue a yarn install but I still have this error, _vm.$t is not a function.

Where does it e from?

I also got some _vm.localePath is not a function...

I made sure it was in my modules too:

modules: [
    ['nuxt-i18n', {
      locales: [
        { code: 'en', iso: 'en-US', name:'English', file: 'en-US.json' },
        { code: 'fr', iso: 'fr-FR', name:'Français', file: 'fr.js' },
        // { code: 'es', iso: 'es-ES', name:'English', file: 'es.js' }
      ],
      defaultLocale: 'en',
      // strategy: 'prefix_and_default',
      lazy: true,
      langDir: 'i18n/',
      // By default, custom routes are extracted from page files using acorn parsing,
      // set this to false to disable this
      parsePages: true,

    }],
...

Thanks!

EDIT: Here's my package.json file:

{
  "name": "myproj",
  "version": "1.0.0",
  "description": "My classy Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "premit": "npm run lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/pro-light-svg-icons": "^5.2.0",
    "@nuxtjs/axios": "^5.0.0",
    "fastify": "^1.11.0",
    "iview": "^3.0.1",
    "koa": "^2.3.0",
    "nuxt": "^1.0.0",
    "nuxt-fontawesome": "^0.3.0",
    "nuxt-i18n": "^5.2.1",
    "pg": "^7.4.3",
    "vuetify": "^1.0.19"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "cross-env": "^5.0.1",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^4.0.0",
    "nodemon": "^1.11.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  }
}

Koa and Vuetify will be replaced by fastify and iview, that is why they are there.

As spotted in the ments, nuxt is version 1.0.0 for a strange reason. I upgraded the package to nuxt 1.4.2. I still have the same issue.

Complete stack trace:

Server listening on http://127.0.0.1:3000
[Vue warn]: Property or method "localePath" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ponents, by initializing the property. See: https://vuejs/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Default> at layouts/default.vue
       <Root>
[Vue warn]: Error in render: "TypeError: _vm.localePath is not a function"

found in

---> <Default> at layouts/default.vue
       <Root>
{ TypeError: _vm.localePath is not a function
    at Proxy.render (layouts/default.vue?2d02:32:0)
    at VueComponent.Vue._render (/media/drive/srv/node/ooo/node_modules/vue/dist/vue.runtime.mon.js:4542:22)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7532:25)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7656:5)
    at renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7420:5)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7538:3)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2449:12)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7646:5) statusCode: 500, name: 'TypeError' }

• javascript
• internationalization
• nuxt.js

• Show your packages file – Aldarund Commented Aug 29, 2018 at 9:37
• Oops, of course, edited. – HypeWolf Commented Aug 29, 2018 at 9:58
• @Aldarund do you see an issue? :\ (I forgot to tag you earlier) – HypeWolf Commented Aug 29, 2018 at 18:02
• Nuxt version that installed is 1.0.0 or 1.4.1 ? – Aldarund Commented Aug 29, 2018 at 19:18
• @Aldarund, it's suppose to be 1.4.1 as I cloned from github./nuxt-munity/create-nuxt-app but indeed this file says 1.0.0. I'll try upgrading this. – HypeWolf Commented Aug 29, 2018 at 19:43

1 Answer 1

[Edit] I don't know if the question was edited after I added the answer or I just didn't understand the question correctly, but my answer describes how to resolve the error in testing environment.

If you have this issue out of testing environment - this answer will not help you, sorry.

Late for the party, but just had to resolve the same issue, so I'll leave it here just in case.

One way to resolve the problem as mentioned here is:

const wrapper = mount(MyComponent, {
  mocks: {
    // Always returns the input
    $t: i => i,
    localePath: i => i
  }
});

However, I've recently found a better way:

./tests/jest.setup.js:

// https://github./nuxt/nuxt.js/issues/4115
import Vue from 'vue'
import { config } from '@vue/test-utils'

Vue.config.silent = true

// Mock Nuxt ponents
config.stubs['nuxt-link'] = true; // string stabs like '<a><slot /></a>' are now depreciated
config.stubs['no-ssr'] = true;
config.mocks.$t = i => i;
config.mocks.localePath = i => i;

./jest.config.js:

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jest.setup.js'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.mon.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/ponents/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  testPathIgnorePatterns: [
    'node_modules',
    'cypress',
  ],
}

Surprisingly enough, I don't need to install ts-jest package at least now even though I use Nuxt Typescript.

Then in each test suite I need to use the mock I've already mentioned on top of this answer.