Skip to main content

Laravel Vuejs Basic Setup




In this article we will see how to setup vue with laravel.

1) Create a laravel project:

laravel new laravue

2) In web.php create a temporary route: 

Route::get('/test', function () {
    return view('welcome');
});

So, when you will see the welcome page once you hit the http://laravue.test/test url.

2) In terminal run: 

npm install

3) npm install vue

(In package.json file you will see that vue dependency has been added successfully)

4) Now go to resources -> js -> app.js file. Here we will have to load the vue.

write the following lines in app.js. 

require('./bootstrap');

window.Vue = require('vue');

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

(Here, vue js will execute and control anything that will be inside the app id. So, for our example 

let's put the app id inside the welcome view).

So, inside welcome.blade.php 's body part write:

<body>
  <div id="app"></div>
</body>

5) Now we will create a component. Component is one of the powerful feature of vue js. It is a way to 

create dynamic , reusable code etc.

inside resources -> js folder create a folder called components and inside components folder

create mainapp.vue file.


Inside mainapp.vue file write:

<template>
  <div>This is the first component</div>
</template>

To use the mainapp.vue component go to app.js and write:

Vue.component('mainapp', require('./components/mainapp.vue').default);

Here, 'mainapp' is the name that we will use to call the component. The name can be anything. and we declared the path of the component in require method and set it as default.

6) Now we will set the mainapp component inside app div of welcome.blade.php view:

<div id="app">
   <mainapp></mainapp>
</div>


8) Now, If you hit the /test url , Though all of the things are done it won't work as because

vue doesn't know what is mainapp until we compile it with webpack.mix.js file. 

Open webpack.mix.js file. There you will see:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');


Which means, take everything from app.js file of resources -> js folder and put them inside the app.js file of public -> js folder.


Run in terminal: npm run watch

(It will compile the webpack.mix.js file)


9) Now, in welcome.blade.php file include the script:

<script src="{{mix('/js/app.js')}}"></script>

(Here, the js/app.js is present inside the public folder).

Now, Hit the /test url of project in the browser. You will see the text of mainapp.vue component.



Comments

Post a Comment

Popular posts from this blog

SQL: sneak peek

show databases; use mysql; show tables; select * from component; describe component; create database sql_intro; show databases; use sql_intro; create table emp_details (Name varchar(25), Age int, gender char(1), doj date, city varchar(15), salary float); describe emp_details; insert into emp_details  values("Jimmy",35,"M","2005-05-30","Chicago",70000), ("Shane",30,"M","1999-06-25","Seattle",55000), ("Marry",28,"F","2009-03-10","Boston",62000), ("Dwayne",37,"M", "2011-07-12","Austin", 57000), ("Sara",32,"F","2017-10-27","New York",72000), ("Ammy",35,"F","2014-12-20","Seattle",80000); select * from emp_details; select distinct city from emp_details; select count(name) as count_name from emp_details; select avg(salary) from emp_details; select name, age...
Post a Comment
Read more

SQLSTATE[42S01]: Base table or view already exists: 1050 Table 'users' already exists

While migration to db you often face/might face this error which says the table name that you wrote is already exists in the database. so in that case one of the solutions that you can try is wrapping up your create schema with this: if(!Schema::hasTable('users')){ } Example: if (! Schema :: hasTable ( 'users' )){              Schema :: create ( 'users' ,  function  ( Blueprint   $table ) {                  $table -> bigIncrements ( 'id' );                  $table -> bigInteger ( 'role_id' )-> unsigned ()-> nullable ();                  $table -> foreign ( ' role_id ' )-> references ( 'id' )-> on ( 'roles' ) ...
Post a Comment
Read more