CSS styling procedure for vue component

Question

I use vue using cdn link and using my component just like this.

Vue.component('forward-button', {
  template: `
		<button type=button class="btn btn-default" @click="goURL">{{this.title}}</button>
	`,
  props: ['url', 'title'],
  methods: {
    goURL: function() {
      console.log(this.url);
      window.open(this.url);
    }
  }
});
new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  <forward-button title="google" url="#"></forward-button>
</div>

How do I style this as the single file component? Don't want to use styling inside HTML

tony19 · Accepted Answer · 2022-07-16 02:00:05Z

1

You can't use Single File Components when using vue through a cdn link.

You can use a CSS file imported at the <head> of your HTML file like a regular website.

edited Jul 16, 2022 at 2:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 23, 2020 at 7:06

Excalibaard

2,10311 silver badges23 bronze badges

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

4 Comments

tuhin47 Over a year ago

if I want to apply CSS only for this component what should I do? If I applied inside head then other elements can be affected

Excalibaard Over a year ago

Use classes to style your elements, and make sure you separate the class names properly. BEM is a method for doing this, but others exist. css-tricks.com/bem-101 If you define your css in classes like forward-button__inner--default for example instead of btn-default, you're OK.

Excalibaard Over a year ago

Just to be absolutely clear: what you're asking is impossible without a build step. Using Vue through a CDN means it's pre-built for you. You can't use component scoped CSS, only global CSS to style components defined this way. So either, you use global CSS in a way that you make classes for each component separately, or you install and build vue locally.

tuhin47 Over a year ago

I do understand. Thanks a lot for helping. Highly Appriciated

Collectives™ on Stack Overflow

CSS styling procedure for vue component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related