CODEWITHSUNDEEP
vue.jsvuejs2vue-router
shrw
shrw

Reputation: 1795

vue.js custom css for a component (Without webpack and vue-loader)

Using Vue Router to load the components.

Note that i am not using webpack or vue-loader.

Here is a sample component that get loaded by vue - router

export default {
    name: 'Abc',
    template:'<div>Now .. i can't add style element here :(. So where should i add it </div>',
    data(){
        return {
             message:' new message'
        }
    },
}

Where can i add css styles. I don't care about css scoped if it is not possible.

Don't want to use render functions ( https://v2.vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth ) .. as creating the dom structure would kill me

Upvotes: 0

Views: 2544

Answers (3)

Franck Freiburger
Franck Freiburger

Reputation: 28448

If you need to use .vue files without webpack (vue-loader) you can have a look at vue3-sfc-loader.

vue3-sfc-loader
Load .vue files dynamically at runtime from your html/js. No node.js environment, no (webpack) build step needed.

(disclamer: author here)

Upvotes: 0

James Whiteley
James Whiteley

Reputation: 3474

As is stated in this answer, you can't define separate CSS in a Vue component using something like css like you can define HTML using template.

That being said, there are a few ways you can define CSS for specific components/elements:

Scoped CSS

You can define a style to be scoped to a component:

App.vue

<template>
  <div id="app">
    <RedComponent/>
    <NotRedComponent/>
  </div>
</template>

<script>
import RedComponent from "./components/RedComponent";
import NotRedComponent from "./components/NotRedComponent";

export default {
  components: {
    RedComponent,
    NotRedComponent
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

RedComponent.vue

<script>
export default {
  template: "<div>I am red</div>"
};
</script>

<style scoped>
div {
  color: red;
}
</style>

NotRedComponent.vue

<script>
export default {
  template: "<div>I am not red</div>"
};
</script>

See this live here

CSS Classes and IDs

You can give elements classes and IDs in order to select them with CSS, and just have a separate CSS file. Note: this is not unique to Vue.

App.vue

<script>
export default {
  name: "App",
  template: '<div><p class="red">I am red</p><p>I am not red</p></div>'
};
</script>

index.css

.red {
  color: red;
}

See this live here

You can reference this index.css file from anywhere (within reason) - for example, in my live demo it is referenced from within index.html itself (something like <link rel="stylesheet" type="text/css" href="index.css" /> within the <head> tag will do).

Inline styles

For this, using backticks (`) rather than quotes will make your life easier. Another benefit of using backticks is the fact that you can span your template over multiple lines.

App.vue

<script>
export default {
  name: "App",
  template: `<div>
    <p style="color: red">I am red</p>
    <p>I am not red</p>
  </div>`
};
</script>

See this live here

Personally, I've never found a use-case where scoped CSS won't do the trick, even with vue-router, but those are some alternative options if you can't use it for whatever reason.

Upvotes: 1

Sarmad Ali
Sarmad Ali

Reputation: 122

You can use any CSS library like Bootstrap, Bulma etc, and add css classes directly in template like the following.

In head section of your page add bootstrap reference link and that's it. 

template: `<div class="container">Boostrap</div>`

Upvotes: 0

Related Questions