CODEWITHSUNDEEP
javascriptvuejs3tailwind-cssdarkmode
Pledge93
Pledge93

Reputation: 103

convert this javascript to Vue 3

Hi i am trying to add darkmode to my project and im following a tutorial but it seems that its a javascript tutorial instaed of a vue one and this section of code is not working and was wondering if someone could help me in converting it to vue 3. this is the tutorial link if it helps. many thanks https://javascript.plainenglish.io/how-to-add-dark-mode-to-your-next-js-project-using-tailwind-css-3d460a768d1c

    <button onClick={() > setDarkMode(!darkMode)}>
      {darkMode ? (
        <SunIcon size="4rem" />
      ) : (
        <MoonIcon size="4rem" />
      )}
    </button>

Upvotes: 0

Views: 561

Answers (1)

firefly
firefly

Reputation: 906

i can't see the page you provided, but I will directly convert the code.

<button @click="darkmode=!darkmode"> 
 <MoonIcon v-if="darkmode" size="4rem" />
 <SunIcon v-else size="4rem" />
</button>

if you are using composition api:

setup(){
   const darkmode = ref(false)

   return {darkmode}
}

if it's options api:

data(){
   return {
      darkmode: false
   }
}

Upvotes: 2

Related Questions