Can I use my existing vue component as a single file component

Question

So I had a vue app that I just wrote into a .html file being served by django. I now am trying to move over to a dedicated vue.js project with the CLI and so I'm wanting to break apart all the components I had in that single file and move them into their own vue files.

My question is can I just create a file called Overview.vue and copy and paste my component into there as is? - or do I need to make some modifications?

Most examples I see of single file components have dedicated blocks for <style> <template> <script>. In my component I pasted below, the template is inside the component. Do I need to change this?

Vue.component('overview', {
  delimiters: [ '[[', ']]' ],
  props: ['jobs', 'links'],
  template: `
  <div overview>
  <h3>Overview</h3>
  <table :style="overviewStyle">
  <tr>
  <td>Start Time</td>
  <td>[[ jobs[0].time_start ]]</td>
  </tr>
  </table>
  </div>
  `,
  computed: {
    overviewStyle() {
      return {
        'padding': '8px',
        'width': '100%',
        'display': 'table',
      };
    },
  methods: {
    getStyle (name) {
      switch (name) {
        case 'SUCCESS':
        return {
          'background-color': '#dff0d8',
          'padding': '10px',
          'line-height': '1.42857143',
          'border': '1px solid #C0C0C0',
        }
        case 'IN_PROGRESS':
        return {
          'background-color': '#f4dc42',
          'padding': '10px',
        }
        case 'FAILURE':
        return {
          'background-color': '#f45942',
          'padding': '10px',
          'line-height': '1.42857143',
          'border': '1px solid #C0C0C0',
        }
      };
    },
  },
});

tony19 · Accepted Answer · 2022-07-16 01:02:13Z

1

Yes, you will need to follow the structure for Vue Single File Components.

It accepts 3 blocks, <template>, <script> and <style>.

<template>
  <!-- your template here -->
</template>

<script>
  // javascript here
  export default {
    data() {
      return { ... }
    },
    methods: { ... }
    // etc
  }
</script>

<style>
  /* any css here */
</style>

edited Jul 16, 2022 at 1:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 11, 2019 at 23:41

Leite

9946 silver badges16 bronze badges

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

1 Comment

david Over a year ago

got it thanks - was hoping i could get away with not changing anything

Collectives™ on Stack Overflow

Can I use my existing vue component as a single file component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related