vuejs is an open source model view view model frontend javascript framework for building user interfaces and single page applications
composer create-project laravel/laravel:^8.0 example-app
cd example-app/
npm init -y
2002 npm install laravel-mix --save-dev
2003 mkdir frontend
2004 cd frontend/
2005 npm -v
2006 node -v
2007 vue --version
2008 npm install -g @vue/cli
2009 cd ../
2010 vue create frontend
2011 cd frontend/
2012 npm install vue-loader vue-template-compiler --save-dev
2013 npm install vue
2014 npm install vue-loader vue-template-compiler --save-dev
2015 npx mix
2016 cd ../
2017 npx mix
2018 npm install vue@latest vue-loader@latest --save-dev
2019 npm ls vue
2020 npx mix
2021 php artisan serve
2022 npx mix
2023 npm run watch
2024 php artisan serve
2025 cd frontend/
2026
2027 cd ../
2028 npx mix
2029 npm install vue-router
2030 npx mix
2031 php artisan serve
node -v
npm -v
at root folder modify webpack.mix.js
const mix = require('laravel-mix');
const { VueLoaderPlugin } = require('vue-loader');
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
});
mix.js('frontend/src/main.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// Your PostCSS configuration here
]);
at web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// Route::get('/', function () {
// return view('welcome');
// });
Route::get('/{any}', function () {
return view('app');
})->where('any', '.*');
view-> app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/main.js') }}"></script>
</body>
</html>
at frontend folder
router.js
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './components/HomePage';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/home',
name: 'Home',
component: HomePage
},
{
path: '/chapter_one',
name: 'ChapterOne',
component: () =>
import ("./components/Chapter/OneChapter")
},
{
path: '/chapter_three',
name: 'Chapterthree',
component: () =>
import ("./components/Chapter/ChapterThree")
},
{
path: '/watcher',
name: 'watcher',
component: () =>
import ("./components/Chapter/WatcherPage")
}
]
});
export default router;
at main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'; // Import the router instance
const app = createApp(App); // Assuming your main app component is App.vue
app.use(router);
app.mount('#app');
at app.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<router-view />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
homepage.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Home Page</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
vs code extensions
vuejs introduction
its is a progressive web framework
it is simple and easy to learn
where we start the application we can extend into large scale applciations
it is combination of angular and react
it is easy to learn
it is faster like react
it has so many forums
without refresh the data or element values we can fetch latest
in html form if we submit whole page refresh
in vuejs page into component that componetn only refresh
https://www.youtube.com/watch?v=8tEfG3LNYPU&list=PLJlg6RBt94MG7UygN6gE1UHGWBHr4lJqi&index=1&pp=gAQBiAQB
https://www.youtube.com/watch?v=_vNRWePmJgM&list=PLJlg6RBt94MG7UygN6gE1UHGWBHr4lJqi&index=4&pp=gAQBiAQB
https://www.youtube.com/watch?v=UvLBG7SNEAI&list=PLJlg6RBt94MG7UygN6gE1UHGWBHr4lJqi&index=5&pp=gAQBiAQB
https://www.youtube.com/watch?v=QAJqUIGVgOs&list=PLJlg6RBt94MG7UygN6gE1UHGWBHr4lJqi&index=6&pp=gAQBiAQB
https://www.youtube.com/watch?v=rllgxbQnXZQ&list=PLJlg6RBt94MG7UygN6gE1UHGWBHr4lJqi&index=7&pp=gAQBiAQB
installation of vuejs
installation of laravel with vuejs mix
laravel mix with vuejs
No comments:
Post a Comment