vue.js integration

[huseyinyildirim]

Thank you for this application. I want to add vue.js to this application. How can I do it?

[odan]

I would recommend using NPM and wepback.

Install Vue

npm install vue

Install Vue loader

npm install -D vue-loader vue-template-compiler

Add this webpack configuration to webpack.config.js:

https://vue-loader.vuejs.org/guide/#manual-setup

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

Add this vue alias in webpack.config.js:

resolve: {
    alias: {
        vue: argv.mode === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
    }
},

Require vue in layout/layout.js:

global.Vue = require('vue');

Create a new vue file, e.g. templates/home/home.vue

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

Require the vue file in home.js

require('./home.vue');

Add some html to the template:

<div id="app">
    <h1>{{ message }}</h1>
</div>

Please note: Vue and Twig use the same template syntax {{ }}. Twig will parse this templates before Vue can render it in the browser.

Run npm run build or npm run watch to compile the files.

Blog post: https://odan.github.io/2020/07/21/slim4-vue.html

[huseyinyildirim]

Thank you @odan.

I successfully did the integration :)