2 Best Reply Awards

  • Member Since 1 Year Ago
  • 408 Lessons Completed
  • 0 Favorites

21st September, 2018

Chris1904 left a reply on Yarn.lock Causing Auto Deploy Error • 3 days ago

I was referring to a Vue SPA - yarn build creates the production build in a Vue CLI project.

So if I understand correctly, I do not need yarn or yarn install in my deploy script, because yarn build installs the dependencies from the lock file?

Thanks for the assistance!

20th September, 2018

Chris1904 started a new conversation Yarn.lock Causing Auto Deploy Error • 4 days ago

Hi everyone,

I am wondering about best practices and how you deal with this scenario:

Currently, my deployment script is:

cd /home/forge/
git pull origin master
yarn install
yarn build
echo "" | sudo -S service php7.2-fpm reload

which results in constant:

error: Your local changes to the following files would be overwritten by merge: yarn.lock.

How would you deal with this "issue"?

git stash save --keep-index ?



29th April, 2018

Chris1904 left a reply on More Series About NUXT, VueX, Vux.... • 4 months ago

I would love to see a Nuxt series as well!

14th April, 2018

Chris1904 started a new conversation How To Parse User From Access_token? • 5 months ago

Hi fellas,

I currently have 2 servers: 1 Laravel backend/API server, 1 frontend server that runs a Vue SPA.

The issue I run into is an authentication issue. From my Vue app I can login successfully through API authentication, using a Password Grant.

An axios request will hit the auth endpoint which will:

$response = $http->post(env('APP_URL').'/oauth/token', [
    'form_params' => [
        'grant_type' => 'password',
        'client_id' => $client->id,
        'client_secret' => $client->secret,
        'username' => $credentials['email'],
        'password' => $credentials['password'],
        'scope' => '',

In return I receive the tokens which I store in localStorage. At some later step in my Vue app, I am trying to make another API request for that logged in user, using the tokens I received from the password grant.

let config = {
    headers: {'Authorization': "Bearer " + state.tokens.access_token}
};'/purchases', {
    form: state.form,
}, config)
    .then(function (response) {
    .catch(function (error) {

But I receive a 401 error

Error: "Unauthenticated."

I assumed that the auth:api middleware would parse the access token to the user, but it seems to not.

How can I parse the user that once my /purchases endpoint gets hit, I can access the user $request->user()?

Thanks for any assistance!


4th March, 2018

Chris1904 started a new conversation How To Best Utilize It Using A Multi Server Setup? • 6 months ago

Hi there,

I am trying to grasp the concept still fully.

So, I have a server setup similar to this:

  • load balancer server
  • x amount of application servers
  • worker server
  • database server

Not that it matters, but the servers are all Forge provisioned, inspired by

Should Envoyer only deploy the application servers? Or should it deploy all the servers? Are there any possible negative outcomes having it deploy all the servers?

Being a novice when it comes to scaling and deployments, I would appreciate any feedback and personal experiences :-)

Best, Chris

26th January, 2018

Chris1904 started a new conversation .htaccess Rewrite Causing A Not Found Error • 7 months ago

Hi there,

At the moment, when I visit, the desired page is displayed. I would like to rewrite the URL to the format of

My current .htaccess file includes this:

    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP_HOST} ^example\.com\/newsletter [NC]
    RewriteRule ^(.*)$ index.php?page_id=6726 [NC,QSA]

Yet, I receive a page not found error.

How can I make the rewrite work so that when I visit the content of is displayed?

Thanks so much, Chris

14th December, 2017

Chris1904 left a reply on Can I Force Images To Be Square? • 9 months ago

You could also simply use CSS and object-fit and then just recommend what the recommended image dimensions should be upon upload.

12th December, 2017

Chris1904 left a reply on Auth Master(universal) Password • 9 months ago

it should not be too hard to reset their password and then impersonate them. There are plenty tutorials on impersonating users.

Chris1904 left a reply on Stripe Docs On • 9 months ago

Yes, you are wrong. There is a charge() method in the billable model, pretty straight forward and easy to use.

Check out my little snippet, it should explain a lot:

try {
    $hasPurchasedBefore = $this->user->stripe_id;

    if (! $hasPurchasedBefore) {
        $customer = $this->user->createAsStripeCustomer(request('stripeToken')['token']['id'], [
            'email' => request('stripeData')['email']
    } else {
        $customer = $this->user->asStripeCustomer();

} catch (\Exception $e) {
    return response()->json(['status' => $e->getMessage()], 422);

Chris1904 left a reply on Social Authentication From 3rd Party Site • 9 months ago

Now, I seem to struggle more on the frontend part.

I assume I need to use something like vue-authenticate, authorize the access, once authenticated make a post request to the backend server and use Socialite and JWT and pass the token back to the frontend if successful. There it would be saved in localStorage.

Is this the basic flow?

Chris1904 left a reply on Social Authentication From 3rd Party Site • 9 months ago

I use socialite right now already, but I struggle figuring it out using Vue and the popup function. Any helpful links that could you know of?

11th December, 2017

Chris1904 started a new conversation Social Authentication From 3rd Party Site • 9 months ago

Hi everyone,

I struggle understanding some concepts and find myself rather new in this type of architecture and would love some ideas on how to structure this best.

I have the following scenario:

I built a Vue plugin that I can put on my clients' websites. It links up to a button and when clicked a menu comes drawn in which input gets generated through my Laravel backend stored on my server - not the clients.

The menu that gets drawn into the client's website is a form wizard. One of the steps is to login and social login. The login I solved using JWT authentication, but I find myself struggling with the Social authentication for Google, Twitter, Facebook.

I need an API authentication as it needs to be validated through their popup logins and the clients website should not be left.

I came across Passport, but I am not sure if that's something I will need. I also came across Facebook Login's SDK, which was very easy to implement, but I am not sure if it was the safest approach.

The question I have is how can I best accomplish this social authentication through API calls in a universal way?

Thanks so much for any help!


10th December, 2017

Chris1904 left a reply on Homestead Google Chrome Security Issues • 9 months ago

Weird. Well, you could always consider using Valet and then running valet secure on your directory if that environment works for your developing purposes

Chris1904 left a reply on Homestead Google Chrome Security Issues • 9 months ago

use .app instead of .dev. Otherwise enable SSL in Homestead. There are quite a few tutorials out there.

6th December, 2017

Chris1904 left a reply on Seed Error In Laravel 5.5 • 9 months ago


public function user() { return $this->hasOne(User::class); }

to your model as well. It seems there is quiet a bit of stuff missing.

4th December, 2017

Chris1904 left a reply on Add Checkbox Array To Database • 9 months ago

If you simply want to store the array, you can json decode it and store in inside a json column.

You could also store it as different booleans - each their own column.

Chris1904 left a reply on Referencing Other Environment Variables In .env • 9 months ago

I don't fully understand, but that's not what env variables are used for.

How about storing them in a config file?

Chris1904 left a reply on Upload App To Server, Size Of Application • 9 months ago


I generally use GitHub. Or you can zip it and unzip it on the server using FTP.

Chris1904 left a reply on Class 'Laracasts\Generators\GeneratorsServiceProvider' Not Found • 9 months ago


did you run composer require laracasts/generators --dev ? Or composer update?

Chris1904 left a reply on Seed Error In Laravel 5.5 • 9 months ago

Add this to your address model:

public function users()
    return $this->hasOne(User::class);

It should fix the issue if you have the a user_id column in your address model.

3rd December, 2017

Chris1904 left a reply on How To Create "custom Subscriptions" Using Stripe? • 9 months ago

Would it work to theoretically create a table that stores all the future charges and then schedule a task that runs every minute to see if it is time to charge a user's model?


Does the following logic make any sense?

I think I am not fully grasping some of the concepts, because it appears to me that if I use the below and the Stripe customer exists, the card would never get updated even if they chose to pay with a different card?

private function singleCharge($when)
    try {
        $customer = $this->user->asStripeCustomer();

        if (! $customer) {
            $customer = $this->user->createAsStripeCustomer(request('stripeToken')['token']['id'], [
                'email' => request('stripeData')['email']
    } catch (\Exception $e) {
        return response()->json(['status' => $e->getMessage()], 422);

    // create the charge in Stripe
    try {
        $this->user->charge($this->price['orderTotal'] * 100, [
            'description' => 'Single Charge - Order ID: '.$order->id.', Restaurant: '.$this->restaurant['name'],
            'metadata' => $metaData,
    } catch (\Exception $e) {
        return response()->json(['status' => $e->getMessage()], 422);

2nd December, 2017

Chris1904 started a new conversation How To Create "custom Subscriptions" Using Stripe? • 9 months ago

Hi everyone,

I have a scenario where I would like customers to choose whether they want a product each Monday (until their chosen expiration date), Tuesday, or Friday, and then charge them on those days that they want to have the product on.

These dates are totally custom and don't have to be of some sort of a convention. It could be that they want a product this Monday only, and then every 2nd Friday - or whatever else they choose.

Am I possible to create a Single Charge at the time of the creation of their all their "subscription dates" and have it charged on that day?

Thanks for any advice, Chris

24th November, 2017

Chris1904 left a reply on Should I Run Npm Run Prod Locally Or On Server? • 10 months ago

thanks so much Adam. Appreciate your advice and all your work :-)

Chris1904 started a new conversation Should I Run Npm Run Prod Locally Or On Server? • 10 months ago

Hi everyone,

I would like to know what the common convention is when it comes to deploying your source.

I have read multiple different opinions on why I should run npm install && npm run prod on my development machine rather than have it added into the forge deploy script.

Others agreed that it works fine to let forge handle npm install and run prod. Is there a common convention here? If so, why would you choose one over another?

Happy Thanksgiving, Chris

15th November, 2017

Chris1904 started a new conversation Which Http Status Code For Invalid Coupons? • 10 months ago

Hi there,

Not having much experience working with error codes, I am running into this scenario: I offer the use of coupons and depending on if the coupon is valid or not, I would like to display the appropriate error message.

I, at first, was using "204 - No Content codes", but realized that since that status code does not accept a body it would be sufficient for coupon codes that do not exist, but in case the order does not reach the minimum dollar amount (or whatever other reason the coupon does not meet the requirements) the coupon would also be invalid. Hence, I would have to display the appropriate error message.

What would be the proper http response status code for my use case?

Thanks for any advice!


8th November, 2017

Chris1904 left a reply on When Debugging In Network Tab Dd() Output Is Not "previewable" • 10 months ago

Thanks for the tip. In my use case I probably should be using Postman. But there still seems to be an issue as mentioned here as well

Chris1904 started a new conversation When Debugging In Network Tab Dd() Output Is The "previewable" • 10 months ago


a few Chrome and Laravel versions back I used to be able to view and debug dd()-output in the network tab of my Chrome browser.

Right now, all that is displayed is in the form off:

<script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = function (e, n, cb) { e.addEventListener(n, cb, false); }; (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element, eventName, callback) { element.attachEvent('on' + eventName, function (e) { e.preventDefault = function () {e.returnValue = false;}; = e.srcElement; callback(e); }); }; } function toggle(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass; if (/\bsf-dump-compact\b/.test(oldClass)) { arrow = '&#9660;'; newClass = 'sf-dump-expanded'; } else if (/\bsf-dump-expanded\b/.test(oldClass)) { arrow = '&#9654;'; newClass = 'sf-dump-compact'; } else { return false; } a.lastChild.innerHTML = arrow; s.className = s.className.replace(/\bsf-dump-(compact|expanded)\b/, newClass); if (recursive) { try { a = s.querySelectorAll('.'+oldClass); for (s = 0; s < a.length; ++s) { if (-1 == a[s].className.indexOf(newClass)) { a[s].className = newClass; a[s].previousSibling.lastChild.innerHTML = arrow; } } } catch (e) { } } return true; }; function collapse(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className; if (/\bsf-dump-expanded\b/.test(oldClass)) { toggle(a, recursive); return true; } return false; }; function expand(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className; if (/\bsf-dump-compact\b/.test(oldClass)) { toggle(a, recursive); return true; } return false; }; function collapseAll(root) { var a = root.querySelector('a.sf-dump-toggle'); if (a) { collapse(a, true); expand(a); return true; } return false; } function reveal(node) { var previous, parents = []; while ((node = node.parentNode || {}) && (previous = node.previousSibling) && 'A' === previous.tagName) { parents.push(previous); } if (0 !== parents.length) { parents.forEach(function (parent) { expand(parent); }); return true; } return false; } function highlight(root, activeNode, nodes) { resetHighlightedNodes(root); Array.from(nodes||[]).forEach(function (node) { if (!/\bsf-dump-highlight\b/.test(node.className)) { node.className = node.className + ' sf-dump-highlight'; } }); if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) { activeNode.className = activeNode.className + ' sf-dump-highlight-active'; } } function resetHighlightedNodes(root) { Array.from(root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private')).forEach(function (strNode) { strNode.className = strNode.className.replace(/\bsf-dump-highlight\b/, ''); strNode.className = strNode.className.replace(/\bsf-dump-highlight-active\b/, ''); }); } return function (root, x) { root = doc.getElementById(root); var indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || ' ').replace(rxEsc, '\')+')+', 'm'), options = {"maxDepth":1,"maxStringLength":160,"fileLinkFormat":false}, elt = root.getElementsByTagName('A'), len = elt.length, i = 0, s, h, t = []; while (i < len) t.push(elt[i++]); for (i in x) { options[i] = x[i]; } function a(e, f) { addEventListener(root, e, function (e) { if ('A' == { f(, e); } else if ('A' == { f(, e); } else if ( && 'A' == { f(, e, true); } }); }; function isCtrlKey(e) { return e.ctrlKey || e.metaKey; } function xpathString(str) { var parts = str.match(/[^'"]+|['"]/g).map(function (part) { if ("'" == part) { return '"\'"'; } if ('"' == part) { return "'\"'"; } return "'" + part + "'"; }); return "concat(" + parts.join(",") + ", '')"; } addEventListener(root, 'mouseover', function (e) { if ('' != refStyle.innerHTML) { refStyle.innerHTML = ''; } }); a('mouseover', function (a, e, c) { if (c) { = "pointer"; } else if (a = idRx.exec(a.className)) { try { refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}'; } catch (e) { } } }); a('click', function (a, e, c) { if (/\bsf-dump-toggle\b/.test(a.className)) { e.preventDefault(); if (!toggle(a, isCtrlKey(e))) { var r = doc.getElementById(a.getAttribute('href').substr(1)), s = r.previousSibling, f = r.parentNode, t = a.parentNode; t.replaceChild(r, a); f.replaceChild(a, s); t.insertBefore(s, r); f = f.firstChild.nodeValue.match(indentRx); t = t.firstChild.nodeValue.match(indentRx); if (f && t && f[0] !== t[0]) { r.innerHTML = r.innerHTML.replace(new RegExp('^'+f[0].replace(rxEsc, '\'), 'mg'), t[0]); } if (/\bsf-dump-compact\b/.test(r.className)) { toggle(s, isCtrlKey(e)); } } if (c) { } else if (doc.getSelection) { try { doc.getSelection().removeAllRanges(); } catch (e) { doc.getSelection().empty(); } } else { doc.selection.empty(); } } else if (/\bsf-dump-str-toggle\b/.test(a.className)) { e.preventDefault(); e = a.parentNode.parentNode; e.className = e.className.replace(/\bsf-dump-str-(expand|collapse)\b/, a.parentNode.className); } }); elt = root.getElementsByTagName('SAMP'); len = elt.length; i = 0; while (i < len) t.push(elt[i++]); len = t.length; for (i = 0; i < len; ++i) { elt = t[i]; if ('SAMP' == elt.tagName) { elt.className = 'sf-dump-expanded'; a = elt.previousSibling || {}; if ('A' != a.tagName) { a = doc.createElement('A'); a.className = 'sf-dump-ref'; elt.parentNode.insertBefore(a, elt); } else { a.innerHTML += ' '; } a.title = (a.title ? a.title+'\n[' : '[')+keyHint+'+click] Expand all children'; a.innerHTML += '<span>&#9660;</span>'; a.className += ' sf-dump-toggle'; x = 1; if ('sf-dump' != elt.parentNode.className) { x += elt.parentNode.getAttribute('data-depth')/1; } elt.setAttribute('data-depth', x); if (x > options.maxDepth) { toggle(a); } } else if (/\bsf-dump-ref\b/.test(elt.className) && (a = elt.getAttribute('href'))) { a = a.substr(1); elt.className += ' '+a; if (/[\[{]$/.test(elt.previousSibling.nodeValue)) { a = a != && doc.getElementById(a); try { s = a.nextSibling; elt.appendChild(a); s.parentNode.insertBefore(a, s); if (/^[@#]/.test(elt.innerHTML)) { elt.innerHTML += ' <span>&#9654;</span>'; } else { elt.innerHTML = '<span>&#9654;</span>'; elt.className = 'sf-dump-ref'; } elt.className += ' sf-dump-toggle'; } catch (e) { if ('&' == elt.innerHTML.charAt(0)) { elt.innerHTML = '&hellip;'; elt.className = 'sf-dump-ref'; } } } } } if (doc.evaluate && Array.from && root.children.length > 1) { root.setAttribute('tabindex', 0); SearchState = function () { this.nodes = []; this.idx = 0; }; SearchState.prototype = { next: function () { if (this.isEmpty()) { return this.current(); } this.idx = this.idx < (this.nodes.length - 1) ? this.idx + 1 : this.idx; return this.current(); }, previous: function () { if (this.isEmpty()) { return this.current(); } this.idx = this.idx > 0 ? this.idx - 1 : this.idx; return this.current(); }, isEmpty: function () { return 0 === this.count(); }, current: function () { if (this.isEmpty()) { return null; } return this.nodes[this.idx]; }, reset: function () { this.nodes = []; this.idx = 0; }, count: function () { return this.nodes.length; }, }; function showCurrent(state) { var currentNode = state.current(); if (currentNode) { reveal(currentNode); highlight(root, currentNode, state.nodes); } counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' of ' + state.count(); } var search = doc.createElement('div'); search.className = 'sf-dump-search-wrapper sf-dump-search-hidden'; search.innerHTML = ' <input type="text" class="sf-dump-search-input"> <span class="sf-dump-search-count">0 of 0<\/span> <button type="button" class="sf-dump-search-input-previous" tabindex="-1"> <svg viewBox="0 0 1792 1792" xmlns=""> <path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"\/> <\/svg> <\/button> <button type="button" class="sf-dump-search-input-next" tabindex="-1"> <svg viewBox="0 0 1792 1792" xmlns=""> <path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"\/> <\/svg> <\/button> '; root.insertBefore(search, root.firstChild); var state = new SearchState(); var searchInput = search.querySelector('.sf-dump-search-input'); var counter = search.querySelector('.sf-dump-search-count'); var searchInputTimer = 0; var previousSearchQuery = ''; addEventListener(searchInput, 'keyup', function (e) { var searchQuery =; /* Don't perform anything if the pressed key didn't change the query */ if (searchQuery === previousSearchQuery) { return; } previousSearchQuery = searchQuery; clearTimeout(searchInputTimer); searchInputTimer = setTimeout(function () { state.reset(); collapseAll(root); resetHighlightedNodes(root); if ('' === searchQuery) { counter.textContent = '0 of 0'; return; } var xpathResult = doc.evaluate('//pre[@id="' + + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), ' + xpathString(searchQuery) + ')]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); while (node = xpathResult.iterateNext()) state.nodes.push(node); showCurrent(state); }, 400); }); Array.from(search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous')).forEach(function (btn) { addEventListener(btn, 'click', function (e) { e.preventDefault(); -1 !=='next') ? : state.previous(); searchInput.focus(); collapseAll(root); showCurrent(state); }) }); addEventListener(root, 'keydown', function (e) { var isSearchActive = !/\bsf-dump-search-hidden\b/.test(search.className); if ((114 === e.keyCode && !isSearchActive) || (isCtrlKey(e) && 70 === e.keyCode)) { /* F3 or CMD/CTRL + F */ e.preventDefault(); search.className = search.className.replace(/\bsf-dump-search-hidden\b/, ''); searchInput.focus(); } else if (isSearchActive) { if (27 === e.keyCode) { /* ESC key */ search.className += ' sf-dump-search-hidden'; e.preventDefault(); resetHighlightedNodes(root); searchInput.value = ''; } else if ( (isCtrlKey(e) && 71 === e.keyCode) /* CMD/CTRL + G */ || 13 === e.keyCode /* Enter */ || 114 === e.keyCode /* F3 */ ) { e.preventDefault(); e.shiftKey ? state.previous() :; collapseAll(root); showCurrent(state); } } }); } if (0 >= options.maxStringLength) { return; } try { elt = root.querySelectorAll('.sf-dump-str'); len = elt.length; i = 0; t = []; while (i < len) t.push(elt[i++]); len = t.length; for (i = 0; i < len; ++i) { elt = t[i]; s = elt.innerText || elt.textContent; x = s.length - options.maxStringLength; if (0 < x) { h = elt.innerHTML; elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0, options.maxStringLength); elt.className += ' sf-dump-str-collapse'; elt.innerHTML = '<span class=sf-dump-str-collapse>'+h+'<a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"> &#9664;</a></span>'+ '<span class=sf-dump-str-expand>'+elt.innerHTML+'<a class="sf-dump-ref sf-dump-str-toggle" title="'+x+' remaining characters"> &#9654;</a></span>'; } } } catch (e) { } }; })(document); </script><style> pre.sf-dump { display: block; white-space: pre; padding: 5px; } pre.sf-dump:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; } pre.sf-dump span { display: inline; } pre.sf-dump .sf-dump-compact { display: none; } pre.sf-dump abbr { text-decoration: none; border: none; cursor: help; } pre.sf-dump a { text-decoration: none; cursor: pointer; border: 0; outline: none; color: inherit; } pre.sf-dump .sf-dump-ellipsis { display: inline-block; overflow: visible; text-overflow: ellipsis; max-width: 5em; white-space: nowrap; overflow: hidden; vertical-align: top; } pre.sf-dump .sf-dump-ellipsis+.sf-dump-ellipsis { max-width: none; } pre.sf-dump code { display:inline; padding:0; background:none; } .sf-dump-str-collapse .sf-dump-str-collapse { display: none; } .sf-dump-str-expand .sf-dump-str-expand { display: none; } .sf-dump-public.sf-dump-highlight, .sf-dump-protected.sf-dump-highlight, .sf-dump-private.sf-dump-highlight, .sf-dump-str.sf-dump-highlight, .sf-dump-key.sf-dump-highlight { background: rgba(111, 172, 204, 0.3); border: 1px solid #7DA0B1; border-radius: 3px; } .sf-dump-public.sf-dump-highlight-active, .sf-dump-protected.sf-dump-highlight-active, .sf-dump-private.sf-dump-highlight-active, .sf-dump-str.sf-dump-highlight-active, .sf-dump-key.sf-dump-highlight-active { background: rgba(253, 175, 0, 0.4); border: 1px solid #ffa500; border-radius: 3px; } pre.sf-dump .sf-dump-search-hidden { display: none; } pre.sf-dump .sf-dump-search-wrapper { float: right; font-size: 0; white-space: nowrap; max-width: 100%; text-align: right; } pre.sf-dump .sf-dump-search-wrapper > * { vertical-align: top; box-sizing: border-box; height: 21px; font-weight: normal; border-radius: 0; background: #FFF; color: #757575; border: 1px solid #BBB; } pre.sf-dump .sf-dump-search-wrapper > input.sf-dump-search-input { padding: 3px; height: 21px; font-size: 12px; border-right: none; width: 140px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; color: #000; } pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next, pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous { background: #F2F2F2; outline: none; border-left: none; font-size: 0; line-height: 0; } pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next > svg, pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous > svg { pointer-events: none; width: 12px; height: 12px; } pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-count { display: inline-block; padding: 0 5px; margin: 0; border-left: none; line-height: 21px; font-size: 12px; }pre.sf-dump, pre.sf-dump .sf-dump-default{background-color:#fff; color:#222; line-height:1.2em; font-weight:normal; font:12px Monaco, Consolas, monospace; word-wrap: break-word; white-space: pre-wrap; position:relative; z-index:100000}pre.sf-dump .sf-dump-num{color:#a71d5d}pre.sf-dump .sf-dump-const{color:#795da3}pre.sf-dump .sf-dump-str{color:#df5000}pre.sf-dump .sf-dump-cchr{color:#222}pre.sf-dump .sf-dump-note{color:#a71d5d}pre.sf-dump .sf-dump-ref{color:#a0a0a0}pre.sf-dump .sf-dump-public{color:#795da3}pre.sf-dump .sf-dump-protected{color:#795da3}pre.sf-dump .sf-dump-private{color:#795da3}pre.sf-dump .sf-dump-meta{color:#b729d9}pre.sf-dump .sf-dump-key{color:#df5000}pre.sf-dump .sf-dump-index{color:#a71d5d}</style><pre class=sf-dump id=sf-dump-1472946577 data-indent-pad="  ">"<span class=sf-dump-str title="10 characters">Flintstone</span>"

Is there a setting of where I can preview such output in the network tab?

Thanks for any hints, Chris

24th October, 2017

Chris1904 left a reply on $(…).DataTable Is Not A Function When Using Laravel Mix • 11 months ago

I was using 5.5.17 and the issue appeared to be with jquery.slim. Once I imported jquery it started working.

21st October, 2017

Chris1904 started a new conversation $(…).DataTable Is Not A Function When Using Laravel Mix • 11 months ago

Hi everyone

I struggle using Laravel Mix and DataTables. The issue I have is that when I compile down my .js-files etc., each time I would then visit a page that would execute a jQuery datatable, the following error is thrown:

The error is:

    jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
    Uncaught TypeError: $(...).DataTable is not a function

From what I understand, $(...).DataTable is not a global variable, but how can I make sure that it is accessible "on a global scope" / within my app?

The following is my setup:


    import jquery from 'jquery/dist/jquery.slim'
    import 'bootstrap-sass'
    import '';
    import dt from '';
    window.$ = window.jQuery = jquery;


        .js('resources/assets/admin/js/app.js', 'js/')
            'jquery', 'bootstrap-sass', '', ''
            jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
            DataTable : ''

Any idea or hint would be highly appreciated.

Best, Chris

11th October, 2017

Chris1904 left a reply on Multiple Entry Points For Laravel Mix? • 11 months ago

I opened a request in here and omnichronous replied with this

So multimix is what I used!

6th October, 2017

Chris1904 left a reply on @click On Checkbox Add/remove Data • 11 months ago

thanks! Totally thought of it the wrong way.

Chris1904 started a new conversation @click On Checkbox Add/remove Data • 11 months ago

Hi there,

I currently have the following scenario:

I have multiple checkboxes, once any is clicked, the value of it will get added to an array. If the checkbox is unchecked then the item needs to be removed out of the array again.

    selectAddOn(addOnId) {
        if (! this.selectedAddOns.includes(addOnId)) {

The following works and it adds them to my selectedAddOns[]. But when the checkbox is checked again, it is not removed. Sure, I could just use else, but...

Unfortunately, the browser behavior is when you click on a <label>, a click event will automatically be triggered on the <input>, so the outer div receives 2 events, one from label, one from input. I am aware that I can work around this by adding @click.prevent on the <label>, but this then will not add my custom checkbox styles.

    <div @click="selectAddOn(index)" class="col-6" v-for="(addOn, index) in categories[categoryId].addOns">
        <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">{{ }} (+ ${{ addOn.price }})</span>

Any idea on how I can work around this scenario?

Thanks soo much!

5th August, 2017

Chris1904 started a new conversation Logging In And Checking If Logged In From Different Website • 1 year ago

Hi everyone,

I am trying to check if a user is logged in on site from, but clearly, I can't just call a route that would check for the authentication.

I assume I could use Laravel Passport, but I am fairly new when it comes to APIs in general.

Could someone help me walk through the process of making this authentication check?

I imagine I would have to:

  1. set up passport
  2. make sure I can make API requests from to
  3. make an API requests that checks whether the user is logged in?

But how can I make the authentication check?

Thanks so much for any hints,


24th July, 2017

Chris1904 started a new conversation Property Or Method "isVisible" Is Not Defined On The Instance But Referenced During Render • 1 year ago

Hi everyone!

I currently have three steps in a form that I want to show sequentially, so I created three components - one for each step of the process.

import LocationList from './components/LocationList.vue';
import ChooseTime from './components/ChooseTime.vue';
import ChooseMethod from './components/ChooseMethod.vue';

Vue.component('location-list', LocationList);
Vue.component('choose-time', ChooseTime);
Vue.component('choose-method', ChooseMethod);

let store = {
    isVisible: {
        steps: {
            one: true,
            two: false,
            three: false,

new Vue({
    el: '#app-order',

    data: store,


Now, when my one and only route is called, all these components are being loaded properly. The issue is that when I try to v-show them one at a time:

<location-list v-show=""></location-list>
<choose-time v-show="isVisible.steps.two"></choose-time>
<choose-method v-show="isVisible.steps.three"></choose-method>

The error message I receive though is:

[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

But when I check within Vue's browser extension, isVisible is defined within the root element?

Thanks for any help!

21st July, 2017

Chris1904 started a new conversation How To Ignore Parent CSS Styles? • 1 year ago

Hi everyone,

I am building a Vue application that lets customers implement a button on their website and on click and it draws in the Vue app/views.

Like this: !(example)[]

Where I struggle is figuring out how I can ignore the inheritance of the parent styles, so that the Vue views only use the associated styles. Is there any "simple" approach to this?

I would appreciate any help and hints towards a solution or workaround for this!



18th July, 2017

Chris1904 started a new conversation How To Execute JQuery Code When Vue-route Is Visited? • 1 year ago

Hi everyone,

I have an off-canvas menu that gets drawn in once a Vue route is clicked using jQuery, like so:

$('body').toggleClass( 'order-drawer-open' );

My route is very simple and is displayed as follows:

<router-link to="/order" exact class="order-drawer-toggler">
    <a>Order Now</a>


Now, how can I make sure that when is viewed in the browser, that then my jQuery calls are getting executed? How can I call a function onload of a route view?

Thanks for any help!


17th July, 2017

Chris1904 left a reply on Versioning With Mix, Manifest Does Not Exist. {but.... It Does!) • 1 year ago

I came across this thread as I faced the same issue.

The problem a lot of the times is that the mix()-helper function by default looks for the manifest-json file in /public/manifest-json.js so if you store that file on any other directory level (which it seemed like you did) then it will throw that error.

Let's say the manifest-json file is stored in public/app/manifest-json.js, then for a file located in public/app/css/app.css you would use:

<link rel="stylesheet" href="{{ mix('css/app.css', 'app/') }}">

The mix()-helper function has allows for a second argument, the directory of the manifest file. Just specify it there and it will use the correct manifest file.

13th July, 2017

Chris1904 started a new conversation How To Best Structure An Embeddabe Vue Project? • 1 year ago

Hi everyone,

I am fairly new to JavaScript development in the first place, but I am working on a personal project that is supposed to have an embeddable off-canvas menu for different clients. The backend is completely done and finished in Laravel.

I struggle finding out where to start, because I would like to have clients only link to my hosted JS file to get the following behavior:

Gif of Screen

If I only had one customer, I would simply do this transition via CSS, so this is where I struggle - knowing how to start this.

Once I figured this out. It seems logical to build a SPA via Vue to get similar behavior with different steps until checkout etc., correct?

Considering how much time I have wasted in past projects due to horrific planning on my side, how should I best structure a project like this?

Thanks so much for any help,


11th July, 2017

Chris1904 started a new conversation Multiple Entry Points For Laravel Mix? • 1 year ago

Hi everyone,

I currently have a problem trying to use multiple entry points in my Mix file.

// Mix frontend resources.
mix.js('resources/assets/js/app.js', 'public/js')
        'jquery', 'bootstrap', 'aos', 'lity',


// Mix app resources.
mix.js('resources/assets/app/js/app.js', 'public/app/js');

I have three entry points in my Mix file. One for frontend, backend and my "public app" file. The code above stores my frontend vendor.js and manifest.js file inside public/app/js when it should be inside public/js.

When I then try to reference

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

it throws webpack errors:

Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object../node_modules/vue/dist/vue.common.js (app.js?id=6431fd7…:sourcemap:28709)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object../resources/assets/app/js/app.js (app.js?id=6431fd7…:sourcemap:37900)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object.0 (app.js?id=6431fd7…:sourcemap:38015)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at webpackJsonpCallback (manifest.js?id=09ecc9b…:26)
    at app.js?id=6431fd7…:sourcemap:1

Is there currently a way to use multiple entry points in a Mix file?

Thanks for any help,


17th June, 2017

Chris1904 started a new conversation How To Associate Array Keys To A Specific Prior Key? • 1 year ago

Hi everyone!

I currently have an array that stores a lot of questions, question types, and answers. Now the answers can be of different lengths. For example:

  0 => array:222 [▼
    0 => "(Type): multiplechoice"
    1 => "(Question): Which of the following is true about pre-test imagery?"
    2 => "(A): People with a cranial fault can visualize the muscle being strong and make it go strong, while people without a cranial faults cannot."
    3 => "(B): If Governing Vessel (GV) 20 tests weak, it also means they have a cranial fault. This is on the midline at the apex of the head."
    4 => "(C): The three most common cranial faults are TMJ, occiput and sphenoid"
    5 => "(D): All of the above"
    6 => "(Correct): D"
    7 => "(Type): multiplechoice"
    8 => "(Question): Which of the following is not true about the TMJ?"
    9 => "(A): Every single TMJ nerve pathway goes through the mesencephalon in the midbrain."
    10 => "(B): When you work on the TMJ it is a neurological back-up for the entire body."
    11 => "(C): To correct press on the glabella with one hand as you press of the back of the head with the other as the patient touches the chin with two fingers and breathes in only one time."
    12 => "(Correct): C"
36 => "(Type): truefalse"
    13 => "(Question): To test for a deficiency of the four primary neurotransmitters, point the edge of a magnet straight in at each of the four corresponding cranial bon ▶"
    14 => "(A): True"
    15 => "(B): False"
    16 => "(Correct): A"

The problem I face is that each question includes a question, type and correct value, but the there could be varying amounts of answers - 10+ answers could be possible.

My current approach was to work through the array and create new arrays for for questions, types, and corrects, and then loop through the arrays and pair pair question's values by the keys. Due to the fact there being different amounts of answers, this unfortunately did not end of being beneficial.

What could be a possible approach to this? How can I associate all the values to the appropriate question?

Thanks so much for any help and hints!


14th June, 2017

Chris1904 left a reply on When Routes URL Is Admin It Results In 404 • 1 year ago

Wow, not sure how I missed that. Thank you sooooooo much!!!

Chris1904 left a reply on When Routes URL Is Admin It Results In 404 • 1 year ago

Doesn't appear to be either :-(

| Domain | Method   | URI                    | Name             | Action                                                                 | Middleware   |
|        | GET|HEAD | /                      | home             | App\Http\Controllers\[email protected]                              | web          |
|        | GET|HEAD | admin                  |                  | Closure                                                                | web          |
|        | GET|HEAD | api/user               |                  | Closure                                                                | api,auth:api |
|        | GET|HEAD | login                  | login            | App\Http\Controllers\Auth\[email protected]                | web,guest    |
|        | POST     | login                  |                  | App\Http\Controllers\Auth\[email protected]                        | web,guest    |
|        | POST     | logout                 | logout           | App\Http\Controllers\Auth\[email protected]                       | web          |
|        | POST     | password/email         |   | App\Http\Controllers\Auth\[email protected]  | web,guest    |
|        | GET|HEAD | password/reset         | password.request | App\Http\Controllers\Auth\[email protected] | web,guest    |
|        | POST     | password/reset         |                  | App\Http\Controllers\Auth\[email protected]                | web,guest    |
|        | GET|HEAD | password/reset/{token} | password.reset   | App\Http\Controllers\Auth\[email protected]        | web,guest    |
|        | GET|HEAD | register               | register         | App\Http\Controllers\Auth\[email protected]      | web,guest    |
|        | POST     | register               |                  | App\Http\Controllers\Auth\[email protected]                  | web,guest    |

Chris1904 left a reply on When Routes URL Is Admin It Results In 404 • 1 year ago

That returns the same 404 error. Hmm...

Chris1904 left a reply on When Routes URL Is Admin It Results In 404 • 1 year ago

My blade file is stored in admin/index.blade.php and there is no problem with it. As I mentioned, if I rename

Route::get('admin', function () {
    return view('admin.index');


Route::get('admins', function () {
    return view('admin.index');

it will work just fine. Accessing just results in a 404.

Chris1904 started a new conversation When Routes URL Is Admin It Results In 404 • 1 year ago


For some odd reason if I try to view the admin route it results in in 404 error.

Route::get('admin', function () {
    return view('admin.index');

If I rename the URL to anything else, it works as expected and it displayed the view.

Have you guys ever experienced something like this? I use Laravel Valet and I would to know how this could be solved.


13th June, 2017

Chris1904 left a reply on When Extracting Resource With Mix It Does Not Get Initialized Correctly • 1 year ago

Any idea? I would rather Mix them than include them manually. :-(

12th June, 2017

Chris1904 started a new conversation When Extracting Resource With Mix It Does Not Get Initialized Correctly • 1 year ago

Hi there,

being fairly new with Laravel Mix, I am facing this issue when I include vendor.js after it was generated:

Uncaught ReferenceError: AOS is not defined
    at Object.webpackJsonp.45.thesaas.aos (frontend.js:498)

Line 498 is:


My webpack.mix file looks like this:

mix.js('resources/assets/js/frontend.js', 'public/js')

Now, when I reference "aos.js" directly there is no error like this. It seems that when extracting, somehow the source is being modified so it is not "directly" accessible anymore?

And yes, I did check, "aos.js" is added correctly inside "vendor.js" and it is loaded after "vendor.js".

How is it possible that when using the source, I can execute AOS.init(), but when using the mixed file, I receive an error?

Thanks for any help!


11th June, 2017

Chris1904 left a reply on How To Finish A Laravel Project Faster?? • 1 year ago

Improve your coding skills, watch Laracasts, read books, have a good daily routine, use existing open source, there are so many ways...

Probably, the best way to get more things done is to set goals and have a game plan. Set realistic goals and get them done.

Chris1904 left a reply on Image Upload Not Working On Server But Working On Local WAMP Server • 1 year ago

upload_max_filesize and post_max_size needs to be greater than 1mb as well. I am sure it is, but might as well get the obvious out of the way.

Chris1904 left a reply on Attempting To Get Spark Off The Ground - "Unable To Locate Mix File: /css/app.css." • 1 year ago

I have never had any Spark projects but have you ran npm install?

Edit Your Profile

Want to change your profile photo? We pull from