nhayder

Experience

21,750

0 Best Reply Awards

  • Member Since 6 Months Ago
  • 171 Lessons Completed
  • 8 Favorites

15th October, 2018

nhayder left a reply on Click Outside Contenteditable Element • 22 hours ago

@Borisu actually i tried that already and it did't work for me, because child element is placed directly on the partent

    <section class="widget-jumborton bg-blue "
        
                    @blue="notEditable" // this will disable editing
        >
      <div class="container mx-auto px-5 pt-20 pb-20">
        
            <div class="text-6xl font-bold text-center text-white" 

                :class="editableClass"

                :contenteditable="editable"

                @click="makeEditable" 

                >

                Click TO EDIT

            </div>

      </div>
    </section>

on same vue component i have this

  methods: {

    makeEditable : function(event){

      this.editable = true;

      this.editableClass = 'shadow-editable rounded';

      // var userInput =  this.content = event.target.innerText;

      // alert(userInput);

    },

    notEditable : function(){

      alert();

    }

  }

after compiling the code the alert is showing if a use click on the editable element + out side the editable element.

nhayder started a new conversation Click Outside Contenteditable Element • 1 day ago

I have a vue app that would make element as contenteditable

<div class="text-6xl font-bold text-center text-white" 

                :contenteditable="editable"

                @click="makeEditable" 

                >

                Click to make div editable

</div>
// this is the function i have in the methods array

    makeEditable : function(){

      this.editable = true;

    },

now i need to reverse what i did by making same element as not editable when a user clicks outside that element?

So what would be the vue comment that would take care of this reversed function

Any ideas?

11th October, 2018

nhayder left a reply on Re-loading Part Of The Page When Adding New Data • 4 days ago

@burlresearch option 2 is a good one, no refreshing is required on this app.

is that case i have this on page controller that get all available pages

$pageList = Page::all();

so how to make this $pageList array available to Vue so i can loop through it ???

nhayder started a new conversation Re-loading Part Of The Page When Adding New Data • 4 days ago

I have page list loaded on the screen using page controller

    @foreach($pageManager as $page)
        <div class="flex mb-4">
            <a href="\{{$page->slug}}" class="border border-blue-lighter ">

                    @if($page->id == 1)
                    
                        <i class="fas fa-home px-1"></i>
                    
                    @endif

                    <img src="{{asset('storage/images/flags/'.$page->language_id.'.png')}}">

                    @if($page->direction == 0)
                        <span class="fa fa-align-left text-grey-dark px-2"></span>
                    @else
                        <span class="fa fa-align-right text-grey-dark px-2"></span>
                    @endif

                    <span>
                        {{ucfirst($page->name)}}
                    </span>
            </a>

        </div>

on same page i have vue form that a user can add new page

        <form action="{{route('newPage')}}" method="POST" enctype="multipart/form-data" @submit.prevent="addNewPage">
            {{csrf_field()}}
            <div class="flex flex-wrap -mx-3 mb-3">
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
                    @lang('translation.name')
                  </label>
                  <input class="focus:outline-none focus:bg-white focus:border-blue appearance-none block w-full text-grey-darker border border-blue-lighter rounded py-3 px-4 mb-3 leading-tight"  

                    type="text" 
                    name="name" 
                    placeholder="@lang('translation.pageNameNote')" 
                    v-model="name" 
                    @keydown="errors.name = null

                    " required autocomplete="off">

                  <span v-if="errors.name" class="text-red text-xs">@{{errors.name[0]}}</span>

                </div>
            </div>

            <div class="flex flex-wrap -mx-3 mb-4">
                <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
                        @lang('translation.language')
                    </label>
                    <div class="relative">
                        <select class="block" name="language_id" v-model="language_id">
                            @foreach($activeLanguages as $languages)
                                <option value="{{$languages->code}}">{{$languages->name}}</option>
                            @endforeach
                        </select>
                                        
                        @can('update_languages')
                            <a href="{{route('languages')}}" class="text-xs">@lang('translation.manageWebsiteLanguages')</a>
                        @endcan
                        
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase">
                        @lang('translation.textDirection')
                    </label>
                    <div class="relative">
                        <select name="direction" v-model="direction">
                            <option value="1">@lang('translation.rtl')</option>
                            <option value="0">@lang('translation.ltr')</option>
                        </select>
                        
                    </div>
                </div>
            </div>

            <div class="flex border-t border-t-grey justify-center py-3 mt-5">

                <button class="linx-btn" :class="isDisabled ? 'disabled' : ''">
                  @lang('translation.createNewPage')
                </button>

            </div>
        </form>

now after the new page created i need to refresh or add the new page to pages list using vue, i have seen a couple of tutorials about this, but i need to know what is the best way to do it.

Any suggestions on how to do this type of refresh / page add ??

nhayder left a reply on How To Clear Validation Span Element On Keydown • 4 days ago

@D9705996 that was easy :-)

nhayder started a new conversation How To Clear Validation Span Element On Keydown • 4 days ago

i'm submitting a form with vue js,

            <div class="flex flex-wrap -mx-3 mb-3">
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label class="block uppercase" >
                    @lang('translation.name')
                  </label>
                  <input class="w-full " type="text" name="name" v-model="name" >

                  <span v-if="errors.name" class="text-red text-xs">@{{errors.name[0]}}</span> // validation text

                </div>
            </div>

in app.js

        addNewPage : function(){ 
            axios.post('/api/newpage', {

                // data to send
                name        : this.name,
                direction   : this.direction,
                language_id : this.language_id,
            })

            // success
            .then( response => alert('Success'))

            // errors
            .catch( error => {

                if (error.response.status == 422) {

                  this.errors = error.response.data.errors

                }

            })

            event.target.reset();

        },

if the form has erros laravel will show errors in the span element above, So my question how to clear the validation errors on @keydown for every input

10th October, 2018

nhayder left a reply on Stucked Again With Stevebauman/purify Package? Its Blocking Youtube / Iframe Custome Video Tags From Ckeditor (oembed) • 6 days ago

@Thyrosis no sorry it looks like dead end for this issues, In My it looks like tags on ckeditor are streamed through 3rd party service and its paid service not for free.

The simple solution is to get an older ckeditor (4.x Maybe 4.2 0r 4.5 not sure exactly) and used it instead the current release, most of the features available on the older versions are simple html + css code there is not issues on those oldies.

i hope this helps :-)

9th October, 2018

nhayder left a reply on Sweetalert2 Returning Uncaught ReferenceError: Swal Is Not Defined With Vue • 6 days ago

@D9705996 this work, and the error removed

window.swal = require('sweetalert2') // added here

nhayder started a new conversation Sweetalert2 Returning Uncaught ReferenceError: Swal Is Not Defined With Vue • 6 days ago

just installed sweetalert2 as my primary alert system, as per the docs i have npm install it and added these for configuration on my main app.js file

require('./bootstrap');

window.Vue = require('vue');

import VModal from 'vue-js-modal'
const swal = require('sweetalert2') // added here

Vue.use(VModal)

also i created a function to show alerts like this

        alertSuccess : function(msg){

            const toast = swal.mixin({
              toast: true,
              position: 'bottom-start',
              showConfirmButton: false,
              timer: 3000,
            });

            toast({
              type: 'success',
              title: msg,
            })

        },

unfortunately, chrome is showing this error on devTools

Uncaught ReferenceError: swal is not defined

What seems to be the problem ?

8th October, 2018

nhayder left a reply on Axios Returning 405 (Method Not Allowed) • 1 week ago

@tykus you are correct, Fixed and its working now, Thanx

nhayder left a reply on Axios Returning 405 (Method Not Allowed) • 1 week ago

@tykus this is the erros as shown on chrome extension

POST http://127.0.0.1:8000/api/newpage 500 (Internal Server Error)

Uncaught (in promise) Error: Request failed with status code 500
    at createError (designer.js?id=ef610d6d1feb857cedbf:594)
    at settle (designer.js?id=ef610d6d1feb857cedbf:745)
    at XMLHttpRequest.handleLoad (designer.js?id=ef610d6d1feb857cedbf:155)

nhayder left a reply on Axios Returning 405 (Method Not Allowed) • 1 week ago

@D9705996

[2018-10-08 18:25:19] local.ERROR: Trying to get property of non-object (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) {"userId":1,"email":"[email protected]","exception":"[object] (ErrorException(code: 0): Trying to get property of non-object (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) at /Applications/MAMP/htdocs/linxtter3/storage/framework/views/2183381abd0870d662da5c08720fbe24c41369ed.php:12, ErrorException(code: 0): Trying to get property of non-object (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) at /Applications/MAMP/htdocs/linxtter3/storage/framework/views/2183381abd0870d662da5c08720fbe24c41369ed.php:12, ErrorException(code: 0): Trying to get property of non-object at /Applications/MAMP/htdocs/linxtter3/storage/framework/views/2183381abd0870d662da5c08720fbe24c41369ed.php:12)
[stacktrace]
#0 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/Engines/PhpEngine.php(45): Illuminate\View\Engines\CompilerEngine->handleViewException(Object(ErrorException), 0)
#1 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/Engines/CompilerEngine.php(59): Illuminate\View\Engines\PhpEngine->evaluatePath('/Applications/M...', Array)
#2 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/View.php(142): Illuminate\View\Engines\CompilerEngine->get('/Applications/M...', Array)
#3 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/View.php(125): Illuminate\View\View->getContents()
#4 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/View.php(90): Illuminate\View\View->renderContents()
#5 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Http/Response.php(42): Illuminate\View\View->render()
#6 /Applications/MAMP/htdocs/linxtter3/vendor/symfony/http-foundation/Response.php(197): Illuminate\Http\Response->setContent(Object(Illuminate\View\View))
#7 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(727): Symfony\Component\HttpFoundation\Response->__construct(Object(Illuminate\View\View))
#8 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(699): Illuminate\Routing\Router::toResponse(Object(Illuminate\Http\Request), Object(Illuminate\View\View))
#9 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(659): Illuminate\Routing\Router->prepareResponse(Object(Illuminate\Http\Request), Object(Illuminate\View\View))
#10 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Routing\Router->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#11 /Applications/MAMP/htdocs/linxtter3/vendor/mcamara/laravel-localization/src/Mcamara/LaravelLocalization/Middleware/LaravelLocalizationViewPath.php(34): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#12 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Mcamara\LaravelLocalization\Middleware\LaravelLocalizationViewPath->handle(Object(Illuminate\Http\Request), Object(Closure))
#13 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#14 /Applications/MAMP/htdocs/linxtter3/vendor/mcamara/laravel-localization/src/Mcamara/LaravelLocalization/Middleware/LaravelLocalizationRedirectFilter.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#15 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRedirectFilter->handle(Object(Illuminate\Http\Request), Object(Closure))
#16 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#17 /Applications/MAMP/htdocs/linxtter3/vendor/mcamara/laravel-localization/src/Mcamara/LaravelLocalization/Middleware/LocaleSessionRedirect.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#18 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Mcamara\LaravelLocalization\Middleware\LocaleSessionRedirect->handle(Object(Illuminate\Http\Request), Object(Closure))
#19 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#20 /Applications/MAMP/htdocs/linxtter3/app/Http/Middleware/WhosOnline.php(42): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#21 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): App\Http\Middleware\WhosOnline->handle(Object(Illuminate\Http\Request), Object(Closure))
#22 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#23 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(41): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#24 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Routing\Middleware\SubstituteBindings->handle(Object(Illuminate\Http\Request), Object(Closure))
#25 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#26 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php(67): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#27 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#28 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#29 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php(49): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#30 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#31 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#32 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(63): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#33 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#34 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#35 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php(37): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#36 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#37 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#38 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php(59): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#39 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#40 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#41 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#42 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(661): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#43 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(636): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request))
#44 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(602): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route))
#45 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(591): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request))
#46 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(176): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request))
#47 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request))
#48 /Applications/MAMP/htdocs/linxtter3/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php(65): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#49 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure))
#50 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#51 /Applications/MAMP/htdocs/linxtter3/vendor/fideloper/proxy/src/TrustProxies.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#52 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure))
#53 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#54 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#55 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#56 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#57 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#58 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#59 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#60 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#61 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure))
#62 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#63 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(51): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#64 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#65 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#66 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#67 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#68 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#69 /Applications/MAMP/htdocs/linxtter3/public/index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#70 /Applications/MAMP/htdocs/linxtter3/server.php(21): require_once('/Applications/M...')
#71 {main}
"} 
[2018-10-08 18:25:23] local.ERROR: Route [/] not defined. {"exception":"[object] (InvalidArgumentException(code: 0): Route [/] not defined. at /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php:370)
[stacktrace]
#0 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Redirector.php(157): Illuminate\Routing\UrlGenerator->route('/', Array)
#1 /Applications/MAMP/htdocs/linxtter3/app/Http/Controllers/PageController.php(110): Illuminate\Routing\Redirector->route('/')
#2 [internal function]: App\Http\Controllers\PageController->createNewPage(Object(Illuminate\Http\Request))
#3 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Controller.php(54): call_user_func_array(Array, Array)
#4 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php(45): Illuminate\Routing\Controller->callAction('createNewPage', Array)
#5 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Route.php(212): Illuminate\Routing\ControllerDispatcher->dispatch(Object(Illuminate\Routing\Route), Object(App\Http\Controllers\PageController), 'createNewPage')
#6 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Route.php(169): Illuminate\Routing\Route->runController()
#7 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(659): Illuminate\Routing\Route->run()
#8 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Routing\Router->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#9 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(41): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#10 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Routing\Middleware\SubstituteBindings->handle(Object(Illuminate\Http\Request), Object(Closure))
#11 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#12 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Middleware/ThrottleRequests.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#13 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Routing\Middleware\ThrottleRequests->handle(Object(Illuminate\Http\Request), Object(Closure), 60, '1')
#14 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#15 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#16 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(661): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#17 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(636): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request))
#18 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(602): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route))
#19 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(591): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request))
#20 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(176): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request))
#21 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request))
#22 /Applications/MAMP/htdocs/linxtter3/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php(65): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#23 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure))
#24 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#25 /Applications/MAMP/htdocs/linxtter3/vendor/fideloper/proxy/src/TrustProxies.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#26 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure))
#27 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#28 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#29 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#30 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#31 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#32 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#33 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#34 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#35 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure))
#36 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#37 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(51): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#38 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#39 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#40 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#41 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#42 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#43 /Applications/MAMP/htdocs/linxtter3/public/index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#44 /Applications/MAMP/htdocs/linxtter3/server.php(21): require_once('/Applications/M...')
#45 {main}
"} 

nhayder left a reply on Axios Returning 405 (Method Not Allowed) • 1 week ago

@tykus now its giving me 500 (Internal Server Error) after removing the dot

i have this now

/api/newpage

this is the error

POST http://127.0.0.1:8000/api/newpage 500 (Internal Server Error)

nhayder started a new conversation Axios Returning 500 (Internal Server Error) • 1 week ago

I'm trying to create new page with axios but im getting 500 (Internal Server Error).

This is my api route

Route::middleware('auth:api')->get('/user', function (Request $request) {

    return $request->user();

});

// rout to create new page
Route::post('/newpage', '[email protected]')->name('newPage');

on page controller

    public function createNewPage(Request $request)
    {

        $newPage = new Page();
        
        $newPage->name = $request['name'];
        $newPage->homepage = '0';
        $newPage->direction = $request['direction'];
        $newPage->language_id = $request['language_id'];
        $newPage->position = '0';
        $newPage->slug = str_slug($request['name']);

        $newPage->save();

        flash('success');
        
        Cache::forget('pageManager');
        Cache::forget('topMenu');
        
        return redirect()->route('/');
        
    }

my vue app.js i have this axios to create the page

        addNewPage : function(){

            axios.post('./api/newpage', {

                // data to send
                name        : this.name,
                direction   : this.direction,
                language_id : this.language_id,
            });


        }

what seems to e the problem??

nhayder left a reply on Vue Is Showing Data For Split Second • 1 week ago

@tykus this is the vue code

Vue.component('left-menu', require('./components/LeftMenu.vue'));

const app = new Vue({

    el: '#designer',

    data: {

        show : true,
        isVisible : false,
        isEditable: false,
        isOpenL : true,
        isOpenR : false,

    },

    methods: {

        makeEditible : function(){

            this.isVisible = true;
            this.isEditable = true;

        },

        toggleLeftMenu : function(){

            this.isOpenL = !this.isOpenL


        },

        toggleRightMenu : function(){

            this.isOpenR = !this.isOpenR


        },

    }

});

nhayder started a new conversation Vue Is Showing Data For Split Second • 1 week ago

I have made a custom modal in my app with tailwind and vue, the modal is included as blade partial on my main page.

<body class="bg-blue-lightest font-light leading-normal">
    
    <div id="designer">

        
        @yield('content')
        
        @include('admin.designer.ui.modals.left') // this is the modal


    </div>

    <script type="text/javascript" src="{{ mix('/js/designer.js') }}"></script>

</body>

what i'm finding out is that vue is showing the modal for split second before the page fully loads then it hides is it form the page.

Im guessing its because vue is not fully loaded yet.

So how can i hide the partial completely and show it only when i click the load modal button.

Any ideas.

nhayder left a reply on Passing Translated String To Vue App • 1 week ago

@rockhopper72 i made some research and it looks like others are not using vue component for passing localization?

They simply are using blade partial and passing standard laravel translations string @lang('---') as it is, they also add vue app on the footer of that partial to control other parts of the app without the need to adding vue components.

This solutions is much better for me but i'm not sure that its recommended way to pass translation without 3rd party plugins??

7th October, 2018

nhayder started a new conversation Passing Translated String To Vue App • 1 week ago

Im having some issues in passing some en + fr + ru translated strings to vue app.

What would be the best way to do this task

5th October, 2018

nhayder left a reply on Vue Is Not Showing Data On Blade Partial • 1 week ago

@petrit This will definitely work, i have tried it before but i was trying to pass the data thought the iframe.

nhayder left a reply on Vue Is Not Showing Data On Blade Partial • 1 week ago

@petrir Not there is not error, not in logs + chrome extension app ????

nhayder left a reply on Vue Is Not Showing Data On Blade Partial • 1 week ago

Sorry about that i forgot to mention that partials are included in a page inserted using ifrom tags

nhayder started a new conversation Vue Is Not Showing Data On Blade Partial • 1 week ago

i have a page will multiple partial, some partial have additional partials included inside of it (i was going DRY).

When testing a simple Vue app like this

const app = new Vue({

    el: '#app',

    data : {

        data: 'Hi'

    }

is only getting shown of the main page only NOT ON THE NESTED PARTIALS.

// this work directly on the main page but not if you add it to any of the partials nested on the page
<input type="text" v-model="data">

Vue chrome extension is not showing any error but the data are not showing on any of the partials.

HOW TO FIX THIS THING.

4th October, 2018

nhayder left a reply on How To Solve Vue Packages Version Mismatch When Compiling Assets • 1 week ago

ok , this fixed it

npm update vue

nhayder started a new conversation How To Solve Vue Packages Version Mismatch When Compiling Assets • 1 week ago

im getting Vue packages version mismatch: when i compile my app assets.

this is the full erros as shown from terminal

hassan-MacBook-Pro:MyApp hassanmansor$ npm run dev

> @ dev /Applications/MAMP/htdocs/MyApp
> npm run development


> @ development /Applications/MAMP/htdocs/MyApp
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting                                                                         

 ERROR  Failed to compile with 1 errors                                                                                                               21:19:31

 error  in ./resources/assets/js/components/ExampleComponent.vue

Module build failed: Error: 

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using [email protected]>=10.0, simply update vue-template-compiler.
If you are using [email protected]<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-template-compiler/index.js:8:9)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-loader/lib/parser.js:1:80)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-loader/lib/loader.js:3:15)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-loader/index.js:1:80)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

 @ ./resources/assets/js/app.js 18:35-79
 @ multi ./resources/assets/js/app.js ./resources/assets/admin/css/designer.css

            Asset     Size  Chunks                    Chunk Names
  /js/designer.js  1.38 MB       0  [emitted]  [big]  /js/designer
/css/designer.css   424 kB       0  [emitted]  [big]  /js/designer
/css/app.css  2.69 MB          [emitted]         
  /js/app.js  3.28 MB          [emitted]         

ERROR in ./resources/assets/js/components/ExampleComponent.vue
Module build failed: Error: 

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using [email protected]>=10.0, simply update vue-template-compiler.
If you are using [email protected]<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-template-compiler/index.js:8:9)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-loader/lib/parser.js:1:80)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-loader/lib/loader.js:3:15)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/MAMP/htdocs/MyApp/node_modules/vue-loader/index.js:1:80)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
 @ ./resources/assets/js/app.js 18:35-79
 @ multi ./resources/assets/js/app.js ./resources/assets/admin/css/designer.css
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hassanmansor/.npm/_logs/2018-10-04T18_19_32_388Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hassanmansor/.npm/_logs/2018-10-04T18_19_32_408Z-debug.log
hassan-MacBook-Pro:MyApp hassanmansor$ 


nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petritr I did Liked all of you comments and i gave you best answer. properly email queue was little bit slow today :-) check now, its online

nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petritr i think you nailed it this time, the component is available on the compiled file but its commented our (with // )

// Vue.component('example-component', require('./components/ExampleComponent.vue'));

plus i found old vue functions and methods that i used 3 days ago, these functions are not available on the updated app.js.

nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petritr made some change on ExampleComponent.vue file

najems-MacBook-Pro:MyApp hassanmansoor$ npm run dev

@ dev /Applications/MAMP/htdocs/MyApp npm run development

@ development /Applications/MAMP/htdocs/MyApp cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

95% emitting

DONE Compiled successfully in 3743ms 15:42:05

        Asset     Size  Chunks                    Chunk Names

/js/designer.js 1.43 MB 0 [emitted] [big] /js/designer /css/designer.css 424 kB 0 [emitted] [big] /js/designer /css/linxtter.css 2.69 MB [emitted] /js/linxtter.js 3.28 MB [emitted] hassan-MacBook-Pro:MyApp najemaldeenhayder$

nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petritr this package.jason

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.1.14",
        "lodash": "^4.17.4",
        "popper.js": "^1.14.4",
        "tailwindcss": "^0.6.5",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^10.0.1",
        "ajv": "^6.5.3",
        "imagemin": "^6.0.0",
        "laravel-mix-tailwind": "^0.1.0",
        "tooltip.js": "^1.3.0",
        "vue-js-modal": "^1.3.26"
    }
}

also you want log of compile when running npm run watch ??? is this same storage/logs/laravel.log ???? or is it deferent file ????

nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petritr file name is ExampleComponent.vue on my HD

this is how i called it from app.js

Vue.component('example-component', require('./components/ExampleComponent.vue'));

these files are not changed since i started this project? they are as laravel provided them.

ITS REALY STRANGE, Nothing is fixing it???

nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petritr Not its not working

npm run dev or watch // did't fix it
php artisan cache:clear// did't fix it

nhayder left a reply on [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

@petrir Just tried that but still not working after removing the @yield('content) part

nhayder started a new conversation [Vue Warn]: Unknown Custom Element: <example-component> - Did You Register The Component Correctly? • 1 week ago

Laravel comes with example-component right our of the box, i was trying to add this comonent on a blade page but keep getting this error.

[Vue warn]: Unknown custom element: <example-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

this is my appl.js


require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({

    el: '#app',

});

this is how i call it from blade

    <div id="app">

        <example-component></example-component>
            
        @yield('content')

    </div>

this is the component as provided by laravel

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

NOTE: npm run watch already running.

What seems to be the problem ???

30th September, 2018

nhayder left a reply on [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

@MaverickChan Thanx for the help again, Its working now.

nhayder left a reply on [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

@MaverickChan Ok i got it working this time, if anybody out there is have same issue like above, make sure you don't have tags on blade template on the same page the vue is working on?

I have removed all customer tags from blade to separate css sheet and my code started to run correctly

All the best

nhayder left a reply on [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

@MarerickChan exactly i don't have a component on the code but yet im still getting error compiling template,Thats wired

29th September, 2018

nhayder left a reply on [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

@MaverickChan yah it worked but im getting new error

[Vue warn]: Error compiling template:

after doing

<div id="app">

    @yield('content')

</div>

nhayder left a reply on [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

@MaverickChan im not sure if i understood you correctly but still im getting the same error

<section id="widget" class="widget-jumborton lg:h-screen md:h-screen flex flex-col justify-around">

  {{-- @include('admin.designer.ui.widget-settings') --}}

  <div class="container mx-auto px-5">

    <div class="flex-col">
      <div class="flex-col p-5">
        
        <div class="flex-1">
            <div class="box text-center text-white">
              <h1 class="text-6xl font-bold text-shadow">Welcome to my website</h1>
            </div>
        </div>
     </div>
    </div>  
  </div>
</section>

nhayder left a reply on [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

@StephenLake this is the blade template im using

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ config('app.name') }}</title>
    <meta charset="UTF-8">
    <meta name="robots" content="nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="robots" content="noindex,nofollow"/> 
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <link href="{{ mix('/css/designer.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/fontawesome5/css/all.min.css') }}" rel="stylesheet">

<body class="bg-blue-lightest font-light leading-normal" id="designer">

    @yield('content')

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

</body>

</html>

nhayder started a new conversation [Vue Warn]: Cannot Find Element: #app • 2 weeks ago

i getting error

[Vue warn]: Cannot find element: #app 

i have this on my main blade page whitch loads widgets dynamically like this

@extends('layouts.theme')

@section('content')

@include('admin.designer.menus.top-menu') 

@foreach($pageWidget as $widget)

    @include('admin.designer.widgets.'.$widget->name.'')

@endforeach

@include('admin.designer.widgets.footer-copyrights')

@endsection

in every widget there i have a widget id="widget"

<section id="app" class="widget-jumborton lg:h-screen md:h-screen flex flex-col justify-around">
    
    // some dynamic data is populated

</section>

on my app.js i have this

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

dose anybody see any thing wrong with my code, ... Vue is not finding the el: '#app'

28th September, 2018

nhayder left a reply on Optional Slug Route • 2 weeks ago

@tehseen when you want to show 404 you do abort(404);

            if (empty($NotSlugFound)) {

                abort(404);

            }
            
            // else then continue with your code

nhayder left a reply on Building Tiny Text Editor With Vue? VUE Expert Advice Needed • 2 weeks ago

@MaverickChan Thank you for the time and efforts you spent typing the code, it looks like your code full working on my app. (I'M SAVED :-) )

Although i need to make some adjustment to it but at least i have stating point.

Thank you again,

27th September, 2018

nhayder left a reply on Building Tiny Text Editor With Vue? VUE Expert Advice Needed • 2 weeks ago

@MaverickChan Font + images + uploads images are not required at all, its a small editor. Basically i need bold, italic, text left, text right and text center.

That's all.

Do you recommend using VUE for this type of project?

nhayder started a new conversation Building Tiny Text Editor With Vue? VUE Expert Advice Needed • 2 weeks ago

Hey,

Im working on a tiny text editor build with vue, im in phase of researching and organizing the workflow.

what im trying to achieve is to allow the user to click title and edit text,

Please have a look at this image https://www.dropbox.com/s/g1oa0wpszdw64eu/Screen%20Shot%202018-09-27%20at%2010.51.41%20AM.png?dl=0

i can populate the menu using poper.js and attached some html icons، What is confusing me is how to make the h1 tags editable ????

According to some tutorials, they basically replace the H1 content with borderless textarea element on the page, and after saving the data? Vue Will replace the texteditor with h1 tags to return the user to initial editing state.

Is this the best way to build this type of editor ???

  • Is there is any plugin that dos the same so i can use it.
  • Can you show basic Vue code to for editing the H1 main title.

all the best

nhayder started a new conversation Building Tiny Text Editor With Vue? VUE Expert Advice Needed • 2 weeks ago

Hey,

Im working on a tiny text editor build with vue, im in phase of researching and organizing the workflow.

what im trying to achieve is to allow the user to click title and edit text,

Please have a look at this image https://www.dropbox.com/s/g1oa0wpszdw64eu/Screen%20Shot%202018-09-27%20at%2010.51.41%20AM.png?dl=0

i can populate the menu using poper.js and attached some html icons، What is confusing me how to replace

Main Title goes here

with editable textarea so the user will be able to re enter new title.

  • Dos any body has a better way on how to build this mini editor???
  • Is there is any plugin that dos the same so i can use it.
  • Can you show basic Vue code to for editing the H1 main title.

all the best

25th September, 2018

nhayder left a reply on Route Is Returning Wrong Values • 2 weeks ago

@Snapey will do

nhayder left a reply on Route Is Returning Wrong Values • 2 weeks ago

@Cronix oops, ...

nhayder left a reply on Docker Series • 2 weeks ago

+1

nhayder started a new conversation Route Is Returning Wrong Values • 2 weeks ago

i have this route where it accepts 2 values

Route::get('/{name}', '[email protected]')->name('editorArticles');

im passing the values like this

<a href="{{strtolower(route('editorArticles', 
    [
        'id'=>$articleDetails->editor->id,
        'name'=>$articleDetails->editor->firstname.'-'.$articleDetails->editor->familyname
    ]
    ))}}" class="no-underline hover:underline text-grey-darker">
        {{$articleDetails->editor->firstname}}
        {$articleDetails->editor->familyname}}
</a>

unexpectedly, the route the link above is returning wrong combination

www. ------ /carrie-goldner?id=135

where im expecting

www.----/123123/mark-anderson // {id}/{name}

Any ideas how to fix this

Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.