CODEWITHSUNDEEP
vue.js
Blues Clues
Blues Clues

Reputation: 1838

How to add if in style tag in component of vue

I'm trying to access data from ...mapGetters in style tag but it returns an error. I can only access the data in other html tags. Please see my code below.

Error

Module not found: Error: Can't resolve 'authenticated&lang=css&'

My code

<script>
    import Navbar from '@/components/partials/Navbar.vue'
    import { mapGetters } from 'vuex'

    export default {
        components: {
            Navbar
        },

        computed: {
            ...mapGetters({
                authenticated: 'auth/authenticated',
                user: 'auth/user'
            })
        }
    }
</script>
<style v-if="!authenticated">
    @import '../assets/css/landing-page.css';
</style>

Upvotes: 0

Views: 1378

Answers (1)

Ballon Ura
Ballon Ura

Reputation: 922

Just separate to new .vue sfc, so the css will load only when the component render app.vue:

<template>
  <div id="app">
    <LoggedIn v-if="authenticated" />
    <SignUp v-else />
  </div>
</template>

<script>
import LoggedIn from "@/components/LoggedIn.vue";
import SignUp from "@/components/SignUp.vue";

export default {
  components: {
    LoggedIn,
    SignUp,
  },
  data() {
    return {
      authenticated: true,
    };
  },
};
</script>

And then in your SignUp.vue:

<template>
  <div>Hello from signup</div>
</template>

<style scoped>
@import "../assets/landing-page.css";
</style>

Upvotes: 1

Related Questions