After working on a Vue app that was directly written into an HTML file served by Django, I am now transitioning to a dedicated Vue.js project using the CLI. As part of this transition, I want to break apart all the components from my single file and move them into their own Vue files.
My question is whether I can simply create a file named Overview.vue and copy-paste my component code in there as it is, or if I need to make some modifications?
In most examples of single file components that I have seen, there are dedicated blocks for <style>, <template>, and <script>. However, in the component code provided below, the template is inside the component itself. Do I need to change this structure?
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',
}
};
},
},
});