separate the html template and vue functionality

[eloy.silva]

Hello friends

I have the following question, for the experts.
Let’s imagine I have the file: Customer.vue

you can have 2 separate files, Customer.vue, where is my html and another Customer2.vue file where is the functionality of vueJS

it’s like before having an html and then we import the javascript where the logic is with vuejs

best regards

[metalsadman]

@eloy-silva read about mixins https://vuejs.org/v2/guide/mixins.html.

[eloy.silva]

@metalsadman

thanks

[walfin]

@eloy-silva You might be interested in what I use:
https://github.com/pksunkara/vue-builder-webpack-plugin

I add it in quasar.conf.js like this:

const VueBuilder=require('vue-builder-webpack-plugin')
...
	extendWebpack(cfg){
		cfg.plugins.push(new VueBuilder({
			path:'src/components',
			folder:true
		}));
...

The downside is that as a result, everything I create (including layouts) has to be under the components folder.

[jraez]

@eloy-silva you can give a try to pug. I’ll not suit 100% your requirement but it may helps.

on your Customer2.vue your template will look like:

<template lang="pug">
  include Customer.pug
</termplate>

Then you can take advantage of the pug possibilities (extends, include, create blocks, re-use template or fragment, etc.)

[eloy.silva]

@jraez thanks

[s.molinari]

To me, you are defeating the whole purpose of SFCs by separating the HTML and the JS code (and the CSS code). You say you’d like to have this but don’t mention the motivation. What is the motivation behind wanting to separate the HTML from the JS code?

Scott

[eloy.silva]

@s-molinari said in separate the html template and vue functionality:

To me, you are defeating the whole purpose of SFCs by separating the HTML and the JS code (and the CSS code). You say you’d like to have this but don’t mention the motivation. What is the motivation behind wanting to separate the HTML from the JS code?

I worked some pages that way, using VueJS, where the work structure is:

in the HTML

 
    <script type="text/javascript" src=@Url.Content("~/js/PartnerSearch.js")></script>

and the file PartnerSearch.js:

var app = new Vue({
    el: '#ui',
    store: store,
    data() {
        return {
            
            tableData: [],
            oSearch: {

                CompanyID: "0",
                PartnerName: "",
                TaxIdentificationNumber:"",
                PageNumber: 1,
                PageSize: 0,
                SortExpression: " asc",
                TimeZoneHours: -5
            },
            oEntity: {
                CompanyID: 0,
                ProfileCode: ""
            },
            
            oPagination: {
                Total: 0
            },                    
            QueryString: [],
            Title: "",
            SideMap: ""
        };

    },
    mixins: [mixin],

.....

[s.molinari]

So, like the UMD mode. i.e. not needing compilation?

If yes, you’ll learn this is a terrible way to develop Vue projects over time.

Scott

[eloy.silva]

@s-molinari said in separate the html template and vue functionality:

So, like the UMD mode. i.e. not needing compilation?
If yes, you’ll learn this is a terrible way to develop Vue projects over time.

I see that, but I was curious