Skip to content

Using vue

Jump to bottom
Julian Gojani edited this page Aug 27, 2020 · 4 revisions

Using vue

In this small tutorial we'll show you how you can use Vue in ulole.

NPM

"dependencies": {
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12"
}
npm install

webpack.js

const { VueLoaderPlugin } = require('vue-loader')
...

module.exports = {
   ...
    plugins: [
        ...
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            ...
        ]
    }
}

Full webpack.js: https://pastefy.ga/S6M3zl6K

resources/js/index.js

import Vue from 'vue'

Vue.component('example-component', require('./components/ExampleComponent.vue').default);


const app = new Vue({
    el: '#app',
    data: ()=>({
        hi: "asd"
    })
});

resources/js/components/ExampleComponent.vue

<template>
    <div>
        <h2>{{ helloMessage }}</h2>
    </div>
</template>

<script>
    export default {
        name: "example-component",
        data: ()=>({
            helloMessage: "Hi there!"
        }),
        mounted() {
            console.log('Welcome in vue!')
        }
    }
</script>

resources/views/homepage.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            font-family: "Manrope", sans-serif;
        }
    </style>
</head>
<body>
        <div id="app">
            {{hi}}
            <example-component></example-component>
        </div>
    <script src="/assets/js/app.compiled.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="app">
            {{hi}}
            <example-component></example-component>
        </div>
    <script src="/assets/js/app.compiled.js"></script>
</body>
</html>

Building it

npm run build

Clone this wiki locally