I’ve created a vue.js 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. there is six components I’ve built like this that work fantastically together.
Can I/how would I translate these to .vue.js 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.js 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.
Solution :
First create the vue.js 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 the app.is just do
import vue.js from ‘vue’;
import CategoryList from ‘./CategoryList.vue’;
Vue.component(‘CategoryList’, CategoryList);
const APP = new Vue({
el: ‘#app’,
});
Now on the 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>