CODEWITHSUNDEEP
javascriptcssvue.js
Michael Miller
Michael Miller

Reputation: 225

Vue style is not being applied

I am facing a strange problem in which the style in my vue component is not being compiled and applied along with the template and script.

I've included my code below. The intention is to animate a slide fade on the hidden text when I click the button. The actual result is the text becomes visible but the css is not applied to it.

app.vue

<template>
  <div>
    <button @click="show = !show">
      Click Me
    </button>
    <transition name="slide-fade">
      <p class="test-style" v-if="show">This is a hidden message.</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
      };
    },
  };
</script>

<style scoped>
  .test-style {
    color: red;
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

app.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  render: h => h(App),
});

Edit - Aug 10th, 2020

This is my package.json

{
  "name": "www",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "css-loader": "^4.2.1",
    "nodemon-webpack-plugin": "^4.3.2",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Upvotes: 2

Views: 8274

Answers (2)

jgarcias
jgarcias

Reputation: 699

I am just learning VueJS 3 along with Larave 8 and I was experimenting the same problem, but it was because I didn't run the

npm run dev

command in the console.

Upvotes: 0

Michael Miller
Michael Miller

Reputation: 225

OKAAAY I finally figured it out. The problem was with the packages.json devDependencies. Specifically the css-loader version ^4.2.1 must somehow be corrupt or super buggy. I changed the version to ^2.1.0 and now the style is loaded just fine and with the scoped param. Thank you Boussadjra Brahim for setting up the sandbox, that was very helpful in my problem-solving.

Upvotes: 4

Related Questions