- Laravel 8.48.2
- PHP 8.0.7
- Composer 2.1.3
Install Laravel
Make sure you have composer install on your machine, if not, go to the download page and install it.
Install Laravel by running the following command
composer create-project laravel/laravel {project_name} --prefer-distServe it by running the following command
php artisan serveInstall Vue
Install vue and vue-template-compiler
npm install --save-dev vue vue-template-compilerInstall vue-loader to use Vue Single-File Components
npm install vue-loader@^15.9.7 --save-dev --legacy-peer-depsCreate a new directory named components in resources/js and create a new Vue component App.vue
<template>
<div>{{ title }}</div>
</template>
<script>
export default {
data() {
return {
title: "Laravel & Vue Js",
};
},
};
</script>In welcome.blade.php replace with the following code
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel & Vue JS</title>
</head>
<body class="antialiased">
<div id="app">
<app-component></app-component>
</div>
<script src="/js/app.js"></script>
</body>
</html>In command line run npm run watch
Open browser at localhost:8000 you will see the title of the data in App.vue component.
