How can I access context from a <script setup> tag in vue3?

November 17, 2022

Previously I used the standard < script > tag with the setup function within it:

    <script>
    import { ref } from 'vue'
    import useLogin from '../composables/useLogin'

    const email = ref('')
    const password = ref('')

    export default {
    setup(props, context){
        const {error, login} = useLogin()

        const handleLoginSubmit = async () => {
            await login(email.value, password.value)
            if(!error.value){
                context.emit('login')
            }
            router.push({name: 'home'})
        }
        return { email, password, handleLoginSubmit }
    
        }
    
    }
    </script>

Now I tried to switch to the < script setup > tag, but I don’t know how to access the context attribute here.

    <script setup>
    import { ref } from 'vue'
    import useLogin from '../composables/useLogin'
    import router from '../router'
    
    const email = ref('')
    const password = ref('')
    
    const {error, login} = useLogin()
    
    const handleLoginSubmit = async () => {
        await login(email.value, password.value)
        if(!error.value){
            context.emit('login')
        }
        router.push({name: 'home'})
    }
    </script>

I get the following error due to the missing definition of the context.

    Uncaught ReferenceError: context is not defined

I tried to import context from vue in different ways, but nothing seems to be the correct.

>Solution :

Context is not available in <script setup> if you want to use emits and props, there are some helpers(macros) exposed to you.

In your case you are trying to use emit, so in script setup it is going to be something like:

<script setup>
const emit = defineEmits(['event1','event2']);
...
emit('event1','some-value');
</script>

So, in your example, that would be:

const emit = defineEmits(['login']);
const handleLoginSubmit = async () => {
        await login(email.value, password.value)
        if(!error.value){
            emit('login')
        }
        router.push({name: 'home'})
    }

For props, you use defineProps. See this for more info