How to create vue file from component markup

Question

I've created a vue component js file that is loaded in my page to do a simple thing:

function CategoryProductViewModel() {
    var props = {
        id:             Number, 
        attributes:     [Array, Object], 
        categories:     Array,
        ...
    }

    var data = function(){
        return {
           quantity:       1
        }
    };

    var computed = {};
    ...


    var methods = {};
    ...

    return {
        props: props,
        computed: computed,
        methods: methods,
        template: "#category-product"
    }
}

Vue.component('category-product', new CategoryProductViewModel());

There's then also some matching html markup in my page:

<script type="text/x-template" id="category-product">
    <li>bunch of html here that's irrelevant</li>
</script>

This all works great. I have six components I've built like this that work fantastically together.

Can I/how would I translate these to .vue files, and ideally then compile those to a single .js file to be included in my page rather than several html templates and several .js file?

I know I'll probably need vue-cli through npm but for the life of me I cannot figure out how to translate what I've written into .vue files in the src/dist folder structure.

If it helps, I'm using these as a sort of standalone front-end application piece inside a larger website running on PHP.

Michael Mano · Accepted Answer · 2019-02-10 22:22:04Z

1

First create your vue components.

CategoryList.vue

<template>
 The HTML you have but make sure it has one parent node.
</template>

<script>
export default {
    props: {
        id:             Number, 
        attributes:     [Array, Object], 
        categories:     Array,
    },

   data(){
        return {
           quantity:       1
        };
    },

   computed: {

    },


   methods: {

    },
}

</script>

Now to build it you will gave to use something like webpack,

Here's my setup

package.json(you can remove a lot of this. I'm on mobile and typing is a pain )



{
  "private": true,
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch --progress",
    "test": "mocha-webpack --require ./resources/assets/js/tests/setup.js ./resources/assets/js/tests/**/*.spec.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.3.1",
    "autoprefixer": "^9.1.5",
    "axios": "^0.18",
    "normalize.css": "^8.0.0",
    "postcss-loader": "^3.0.0",
    "vue": "^2.5.17",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.1",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@vue/test-utils": "^1.0.0-beta.25",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.2",
    "browser-sync": "^2.24.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "eslint": "^5.6.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^4.7.1",
    "expect": "^23.6.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "ignore-styles": "^5.0.1",
    "jest": "^23.6.0",
    "jest-serializer-vue": "^2.0.2",
    "jsdom": "^12.0.0",
    "jsdom-global": "^3.0.2",
    "mini-css-extract-plugin": "^0.4.2",
    "mocha": "^5.2.0",
    "mocha-webpack": "^2.0.0-beta.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "svg-inline-loader": "^0.8.0",
    "url-loader": "^1.1.1",
    "vue-jest": "^2.6.0",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js


const path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, './', dir);
}

module.exports = {
  mode: process.env.NODE_ENV,
  entry: ['./resources/assets/entry.js'],
  output: {
    path: resolve('./public/'),
    filename: 'js/app.js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jp(e*)g)$/,
        loader: 'url-loader'
      },
      {
        test: /\.(svg)$/,
        loader: 'svg-inline-loader'
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({ filename: 'css/app.css' }),
    new CopyWebpackPlugin([
      {
        from: resolve('resources/assets/images'),
        to: resolve('public/images'),
        toType: 'dir',
      },
      {
        from: resolve('resources/assets/icons'),
        to: resolve('public/icons'),
        toType: 'dir',
      },
    ]),
  ],
};

resources/assets/entry.js


require('@babel/polyfill');
require('./js/app.js');
require('./sass/app.scss');

And in your app.is just do

import Vue from 'vue';
import CategoryList from './CategoryList.vue';

Vue.component('CategoryList', CategoryList);


const APP = new Vue({
  el: '#app',
});

Now on your html page you can just do <category-list></category-list>

That's after building

E.g. public/index.HTML

<HTML>
<head></head>
<body>
    <main id="app">
        <category-list></category-list>
    </main>
    <script src="js/app.js" type="text/javascript"></script>
</body>
</HTML>

edited Feb 10, 2019 at 22:22

answered Feb 10, 2019 at 22:09

Michael Mano

3,4582 gold badges16 silver badges36 bronze badges

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

7 Comments

Michael Mano Over a year ago

If this helped please consider marking it as answered

vhs Over a year ago

This was very complex answer for a simple ask. And you don't have to use Webpack.

Michael Mano Over a year ago

@JoshHabdas something like webpack I guess my answer was so complex you did not read.

vhs Over a year ago

I think you may have misunderstood my feedback. You don't have to use something like Webpack either. Bundlers are not necessary and in the context of a question like this add more complexity than it's worth to solve what OP is asking. But thanks anyway for your snark.

Michael Mano Over a year ago

Now Im curious, how would you then compile said vue file into js

|

Collectives™ on Stack Overflow

How to create vue file from component markup

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related