Skip to content

Using vue

Jump to bottom
Julian Gojani edited this page Nov 22, 2020 · 1 revision

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 rel="stylesheet" href="/assets/css/app.compiled.css">
    <title>Vue example</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>

Building it

npm run build
# or
npm run watch # for auto builds on save

Using Vue-Router

NPM

npm install vue-router

resources/js/index.js

/*...*/
import router from './router'

/*...*/

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

resources/js/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Homepage from '../views/Homepage.vue';
import About from '../views/About.vue';

Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        name: "Homepage",
        component: Homepage
    },
    {
        path: "/about",
        name: "About",
        component: About
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routes
})

export default router

resources/js/views/Homepage.vue

<template>
    <div>
        <h1>Test</h1>
        <router-link to="/about">About</router-link>
    </div>
</template>
<script>
export default {
    name: "Homepage"
}
</script>

resources/js/views/About.vue

<template>
    <div>
        <h2>About</h2>
    </div>
</template>

app/routes.php

<?php
/*...*/
$router->get("(.*)", "homepage.php");
$router->setPageNotFound("homepage.php");
/*...*/

Done!

npm run build
Clone this wiki locally