CODEWITHSUNDEEP
vue.jsvuejs2vue-component
tuhin47
tuhin47

Reputation: 6068

CSS styling procedure for vue component

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

Upvotes: 0

Views: 166

Answers (1)

Excalibaard
Excalibaard

Reputation: 2073

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.

Upvotes: 1

Related Questions