I cannot access to mixin funtions

Version:

@inertiajs/vue3 version: 1.0.2

Describe the problem:

app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import {base} from '@/base'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mixin(base)
      .mount(el)
  },
})

base.js

export const base = {
    methods: {
        /**
         * Translate the given key.
         */
        tr(key, replace = {}) {
            let translation = this.$page.props.language[key]
                ? this.$page.props.language[key]
                : key;

            Object.keys(replace).forEach(function (key) {
                translation = translation.replace(':' + key, replace[key])
            });

            return translation
        },
   
    
    }
};

<script lang="ts" setup>
console.log(this.tr('welcome')); /// Error
</script>
<template>
<p>{{tr('welcome')}}</p> // Work
</template>

I cannot access to method tr from setup

vjupix

2 years ago

Level 2

Same problem over here. Seems like inertia does not allow mixins anymore? Nothing on the net works for me in recent version. Always getting something like Uncaught (in promise) TypeError: _ctx.myfunction(...) is not a function

Abhishek0116

2 years ago

Level 2

You need to add methods inside mixin like this

.mixin({
  methods: {
    base,
  }
})

Your full code with modification

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import {base} from '@/base'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mixin({
        methods: {
          base,
        }
      })
      .mount(el)
  },
})

Please or to participate in this conversation.