afoysal

Thanks @NickVahalik . I tried in several ways but none is working. Thanks.

Thanks @NickVahalik . My Hot Reload of vue-cli is not working. Thanks.

Thanks @NickVahalik for your reply. How to enable Hot reload in vue-cli ?

How to know my Hot reload is working properly ?

Thanks @rin4ik for your reply. Is there any folder in Vue.js named resources and public ?

Thanks @NickVahalik for your reply. I did not run the command. But I am looking for hot reload in a vue.js project.

Why I am getting this message ? What is the meaning of this message ?

Thanks @rin4ik . I think you are talking about Laravel.

My code is like below in Container.vue

<template>
  afasdfasf
</template>

That's why I am getting below error.

I changed my code like below in container.vue.

<template>
    <div>
        hello
    </div>  
</template>

But the browser is not refreshing. Hot reload is not working.

My package.json code is like below

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

What is the proper way of adding external CSS file in Vue.js Application ?

I found several ways to add CSS file in Vue.js Application.

Some one suggest to use this one. <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">.

Some one suggest this one

<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>

Some one suggest this one

require('./assets/layout3/css/layout.min.css')

Some one suggest to use below code in webpack.config.js.

{
    test: /\.(css|less)$/,
    use: [{
         loader: "style-loader" // creates style nodes from JS strings
    }, {
         loader: "css-loader" // translates CSS into CommonJS
    }, {
         loader: "less-loader" // compiles Less to CSS
    }]
  }

Some one suggest to use this one

<style src="../node_modules/vue-multiselect/dist/vue-multiselect.min.css"></style>

What are the merits and demerits of using all those ways ?

I would like to use in a way so that all CSS files become a single file at the time of deployment. So that my application loads faster.

I am trying to integrate Stripe in my Laravel Application. I am trying to use this (Pay with Card) Service of Stripe.

I am using below code after redirection from Stripe

try {
            $charge = Charge::create([
                'amount'          => $price * 100,
                'currency'        => 'gbp',
                'source'          => $request->stripeToken,
                'application_fee' => 123,          // Here is the issue , if I remove this line it works fine.
            ], [
                'stripe_account' => $stripe_id,
            ]);
        } catch (Exception $e) {
            return back()->withError('Something went wrong while processing your payment.');
        }

I am getting below error

Thanks @bobbybouwmann for your reply. What will happen if fails to save in database ?

I am learning react.js. I am trying to develop an application where there is a feature like Facebook comment system.I would like to know "is Facebook comment coming from Database using AJAX request or it is placing text just from input box using React.js.

Before

After

Facebook comment reply is so fast. On the other hand in my application I can't make is fast like Facebook.

Thanks @acacha . I read your package. How can use that if I would like to use Laravel 5.6 ?

@bashy , may be your are right ? What is the solution of this issue ?

@jlrdw , I set permission of storage folder 777. I trying to follow this tutorial http://novate.co.uk/deploy-laravel-5-on-shared-hosting-from-heart-internet/.

Thanks @jlrdw . Why Laravel is looking for this (/home/foysal/Videos/bad-laravel-adminpanel/) directory every time I tried to host the application ? This is my local machine directory. I think there is something to clear, like cache.

Thanks @jlrdw . PHP version of the server is 7.1. I am using Laravel 5.6. I tried to host the application in several ways. But I am facing errors in all the ways. Thanks.

Thanks @skoobi . I cleared cache on your local host first then upload it. But still I am getting the error.

Thanks @jlrdw for your reply. Why I am facing this issue ? Is it for Shared Hosting ? Thanks.

I developed an application in my local Machine. It is working fine. But I host it in a Shared Hosting. I am getting below error there in error.log file.

[11-May-2018 13:53:53 UTC] PHP Warning:  Uncaught ErrorException: require(/home/foysal/Videos/bad-laravel-adminpanel/routes/breadcrumbs.php): failed to open stream: No such file or directory in /home/aylatddd/public_html/adminpanel/vendor/davejamesmiller/laravel-breadcrumbs/src/BreadcrumbsServiceProvider.php:92
Stack trace:
#0 /home/aylatddd/public_html/adminpanel/vendor/davejamesmiller/laravel-breadcrumbs/src/BreadcrumbsServiceProvider.php(92): Illuminate\Foundation\Bootstrap\HandleExceptions->handleError(2, 'require(/home/f...', '/home/aylatddd/...', 92, Array)
#1 /home/aylatddd/public_html/adminpanel/vendor/davejamesmiller/laravel-breadcrumbs/src/BreadcrumbsServiceProvider.php(92): require()
#2 /home/aylatddd/public_html/adminpanel/vendor/davejamesmiller/laravel-breadcrumbs/src/BreadcrumbsServiceProvider.php(61): DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider->registerBreadcrumbs()
#3 [internal function]: DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider->boot()
#4 /home/aylatddd/public_html/adminpanel/vendor/laravel/framework/src/Il in /home/aylatddd/public_html/adminpanel/vendor/davejamesmiller/laravel-breadcrumbs/src/BreadcrumbsServiceProvider.php on line 92
[11-May-2018 13:53:53 UTC] PHP Fatal error:  DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider::registerBreadcrumbs(): Failed opening required '/home/foysal/Videos/bad-laravel-adminpanel/routes/breadcrumbs.php' (include_path='.:/opt/alt/php71/usr/share/pear') in /home/aylatddd/public_html/adminpanel/vendor/davejamesmiller/laravel-breadcrumbs/src/BreadcrumbsServiceProvider.php on line 92
[11-May-2018 13:55:51 UTC] PHP Fatal error:  Allowed memory size of 134217728 bytes exhausted (tried to allocate 32768 bytes) in /home/aylatddd/public_html/adminpanel/bootstrap/cache/config.php on line 487

I am using this (https://github.com/viralsolani/laravel-adminpanel) package. My application was working well. I ran this commands php artisan config:cache,php artisan clear-compiled,php artisan route:clear,php artisan view:clear,php artisan cache:clear.

After that my application is not working.

Thanks @Sergiu17 , @jlrdw , @skoobi , @Nash . I am getting below error.

[09-May-2018 15:44:17 UTC] PHP Fatal error:  Uncaught ErrorException: file_put_contents(/home/foysal/Videos/bad-laravel-adminpanel/storage/framework/views/91c1611d010431b3956d338a2c74e16e093af712.php): failed to open stream: No such file or directory in /home/aylatddd/lsapp/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:122

Thanks @Sergiu17 for your reply. I did APP_DEBUG=true in both .env file and app/config.php file. Even I try to find out something in storage/logs/laravel.log but I did not get anything there.

I am trying to install a Laravel application in Shared Hosting following this tutorial where my server's PHP version is 7.1.17 and my Laravel version is 5.6.15.

When I am trying to browse my application using Chrome I can see only a White page, even no error is there.

I tried to debug the application and found that below code of index.php is not working.

$response = $kernel->handle(
    $request = Illuminate\Http\Request::capture()
);

What is the solution of this issue?

I am looking for react.js with Laravel Token based User Authentication tutorial.

Thanks @ejdelmonico for your reply. I know the issue. I would like to make data an array. I failed to do that. Thanks

Thanks @Cronix for your reply. Is it possible to send array ?

Thanks @N3. I did all those. I would like to pass the data array. Here is the issue. Thanks.

I am passing values from JavaScript to PHP. I am passing like this

var data = { name:this.name, email:this.email, password:this.password }.

I would like to receive like this

protected function create(array $data) { return User::create([ 'name' => $data['name'], 'email' => $data['email'], 'password' => bcrypt($data['password']), ]); }.

But I am getting error.

Thanks.

I am developing an application using Laravel 5.6 and vue.js2. I am using Laravel Passport for User Authentication as API. I am have no route about this in api.php of Laravel. I have below code in vue.js.

methods: {
        login() {
            var data = {
                client_id: 2,
                client_secret: 'ispGH4SmkEeV4i5Tz9NoI0RSzid5mciG5ecw011f',
                grant_type: 'password',
                username: this.email,
                password: this.password
            }
            this.$http.post('http://127.0.0.1:8000/oauth/token',data)
                .then( response => {
                    this.$auth.setToken(response.body.access_token, response.body.expires_in + Date.now())                        
                    this.$router.push('dashboard')
            })
        }
    }

Now I would like to fetch authenticated User details like userName,email etc.

I have below code in vue.js method.

if(element == 'name'){
   var address_data = {
   name : this.name 
  }
}

I would like to replace name using element like below

if(element == 'name'){
   var address_data = {
   element : this.element 
  }
}

How can I do it ?

Thanks @buriresearch . Could you please show us some code? Thanks.

I am doing below code in a vue.js application. I would like to do this in a programmatic way to reduce the code size.

display_input(valu) {
            if(valu == 'editName') {
                this.editName = true
                this.editAddress = false
                this.editTelephone = false
                this.editEmail = false
            }
            if(valu == 'editAddress') {
                this.editName = false
                this.editAddress = true
                this.editTelephone = false
                this.editEmail = false
            }
            if(valu == 'editTelephone') {
                this.editName = false
                this.editAddress = false
                this.editTelephone = true
                this.editEmail = false
            }
            if(valu == 'editEmail') {
                this.editName = false
                this.editAddress = false
                this.editTelephone = false
                this.editEmail = true
            }
        },

Thanks @rin4ik . But I don't need that. I need only one at a time. Like if I click on Edit beside name, then only name input field will appear. if I click on Edit beside address, then only address input field will appear. Thanks.

Thanks @rin4ik for your reply. In that case all (name,email,address_telephone_no)input field will be enabled. Thanks.

I am trying to develop an application using vue.js. I have some data like below

I would like to edit those data like below

How can I implement that in vue.js?

Any sort of guideline, clue and tips is helpful in this regard.

Thanks @neilherbertuk . I think I did mistake. But don't know where is the mistake. Thanks.

How can I update a record from Vue.js to Laravel ?

I am trying to send AJAX request from vue like below

var address_data = {
                    name        :this.dname,                    
                    address     :this.address,
                    telephone_no:this.telephone_no,
                    email       :this.email,
                    image       :this.image,
                    user_id     :this.user_id,
                }

this.$http.post('http://127.0.0.1:8000/api/addresses/{address}',address_data,{headers: {'Authorization': 'Bearer ' + this.$auth.getToken()}}).then(response => {
                    if(response) {                      
                            //some code
                        }
                    },
                    response => {
                        //some code
                    })

In api.php my route is like below

Route::group(['prefix' => 'addresses', 'middleware' => 'auth:api'], function () {
    Route::put('/{address}', '[email protected]');
});

In AddressContoller.php I wrote below code for update function.

public function update(Request $request, Address $address)
    {
        $address->update($request->all());

        return response()->json($address, 200);
    }

May be I did some mistake. I don't know where is the mistake.

Thanks @franckysolo . I edited the question.

I have a form field like below

<input type="text" :value="addressObj.name" v-model="name">

It is not working. But below code is working

<input type="text" :value="addressObj.name">

Why v-model is not working here ?

I have 3 components. They are dashboard.vue, datatable.vue and modalbody.vue. After login my application reach in dashboard.vue. Where I call datatable.vue to display a list with some props. I have a button in datatable.vue. If I click on that button a modal will open to add new record to add that list (datatable.vue) using modalbody.vue.

Now I need to reload that list (datatable.vue) after inserting new record through modal (modalbody.vue).

How can I do that ?

How to call a method of another component ?

Like I have a component named Modal.vue . I have a method like below

methods: {
            getUsers() {  //some code here }
},

I would like to call that method in another component named Dashboard.vue.

Thanks @topvillas . Should I use <template></template> for this ? Thanks.

How to change HTML elements dynamically in vue.js ? Like I have an element <div>abcd</div>. I would like to change it after click on it to <h1>xyz</h1>. Thanks.

Thanks @rin4ik and @topvillas . I tried to log like below { progress(evt) { console.log('hello') if (evt.lengthComputable) { console.log(evt.loaded / evt.total * 100); } } } . But this is not working. That means progress() is not triggered.

I am trying to develop a Vue.js application.In this regard I am uploading file in this Application. Now I would like to develop a progress bar for that file upload feature. I am trying to follow a tutorial. Here I got axios library for upload file. The code is like below

axios.post("/upload.php",fd,{
    onUploadProgress: function() {
       //code here
    }
})

But I am using vue-resource. How can I detect upload progress in vue-resource?

I am getting below error while I am running npm run watch.

Here is the output of vue -V.

[![enter image description here][1]][1]

Here is the package.json

{
  "name": "my-project-front",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "foysal",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "watch": "npm-watch"
  },
  "dependencies": {
    "npm": "^5.7.1",
    "npm-watch": "^0.3.0",
    "sweetalert": "^2.1.0",
    "v-data-table": "^2.0.1",
    "vue": "^2.4.2",
    "vue-js-modal": "^1.3.6",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vue-ya-semantic-modal": "0.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
``




  [1]: https://i.stack.imgur.com/x00Vb.png

I am trying to develop a SPA using Vuejs2 and Laravel 5.6 with Passport package. I would like to retrieve logged in User info like User id.

Laravel api.php is like below

Route::group(['middleware' => 'auth:api'], function () {

    Route::apiResource('posts', 'postController');
});

vue.js login() method is like below

methods: {
            login() {
                var data = {
                    client_id: 2,
                    client_secret: 'ispGH4SmkEeV4i5Tz9NoI0RSzid5mciG5ecw011f',
                    grant_type: 'password',
                    username: this.email,
                    password: this.password
                }
                this.$http.post('http://127.0.0.1:8000/oauth/token',data)
                    .then( response => {
                        console.log(response)
                })
            }
        } 

Here is the output of console.log(response)

https://i.stack.imgur.com/HL7pe.png

How can I get User Id ?

Thanks @ejdelmonico for your reply. I need a step by step guide to have the command npm run watch. I am using Linux Mint 18.3. How to know the version of vue-cli ? What should I do if my version is not v2.9.3 ? Thanks.