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

Question

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.

Zarko · Accepted Answer · 2022-11-17 09:18:01Z

2

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

answered Nov 17, 2022 at 9:18

Zarko

3543 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related