Extensible architecture for Laravel and Vue JS components

I'm building a blog application, which had extensible feature in Laravel 5.5 with front end Vue JS 2.4, I'm having a folder structure something like this

Blog:
    Controllers
    Databases
    Models
    Routes
        web.php
        api.php
    Extensions
        Extension 1
            Models
            Controllers
            Databases
            Routes
                api.php
            Views
                Components
                    extension1.Vue
                Store
                app.js
            config.php
        Extension 2
            Models
            Controllers
            Databases
            Routes
                api.php
            Views
                Components
                    extension2.Vue
                Store
                app.js
            config.php
        Extension 3
            *
            *
            *
    Views
        home.blade.php
        Assets
            JS
                Components
                    Dashboard.Vue
                    Posts.Vue
                    Plugins.Vue
                Routes
                Store
                app.js
                bootstrap.js
            CSS

Basic core structure says, that I'm having a package of blog which has its own controllers, models, databases.. etc, In views folder I'm having a basic home.blade.php which is only used in rendering the app.js file compiled by webpack.mix.js while app.js file inside the views folder contains basic bootstrapping similar to Laravel's resources/assets/js/bootstrap.js, file links I'm loading basic components like dashboard section, posts section, plugins section etc. Now in dashboard section I want to having dynamic widgets which can be pulled from the extension folders but according to the user needs, I mean there can be a lot of extension out of which suppose end user opted to have 5-6 widgets to show on there dashboard, I want to load or render only those extension's components.

In short I want to import extension components dynamically. How can I achieve this, I've seen a article regarding async vue components where I can call components dynamically but not able to get how to implement this in architecture, I think there can be the basic steps to achieve this:

Lets take an example of weather widget

Step 1: Create a js file, destination Extensions/Views/weather.js which will hold the basic vue state instance of that particular plugin.

Step 2: Create a Vue component file, destination Extensions/Views/Components/weather.vue which holds the component instance.

Step 3: Asynchronously load the components through axios call in dashboard view.

I went through this forum discussion and came to point that this can be possible, only thing is we have to compile the component asynchronously. I mean we have to define the components in app.js file so I can make a list of all the widgets/extensions in a json file and push them as axios/ajax call to compile the components.

So my code looks like: https://gist.github.com/nitish1986/3ec9f71d0f58759b74b756551b2331fa

I'm not sure about my code, guide me how can I do the implementation.

  • Laravel 5.7, do something before user logout

    I wanted to set the current user type field to something else before logout but the problem is, I don't know which controller or which method I should put this code at. Btw, I don't have AuthController in Laravel 5.7.

    $user = Auth::user();
    $user->type = "something";
    $user->save;
    
  • How to change background image on mobile view?

    I need to change the background image in mobile and desktop view. I used below code to display background image.

    <img class="slider_Style" :style="{ backgroundImage: 'url(' + offer.slider_image + ')', backgroundPosition: '50% 50%' }" />
    

    How to change the code for mobile view using conditions.

  • Can a ui component be an activator for two items? (Trying to use a v-tooltip with a v-dialog)

    I have a button that is the activator for a dialog in my template. But I also want to use a tooltiop with the button. (Said otherwise, when I hover over the button I'd like to see the v-tooltip and when I click the button I'd like to open the dialog.)

    I've tried to use the "append" slot on the tooltip but no success. When I add the append slot, the button completely vanishes from the rendered page.

    Is it even possible to use a v-tooltip with a v-dialog in veutify?

    This is what I have that does not work.

    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    
    <v-app>
      <v-dialog v-model="showAddPopup" persistent max-width="600px">
        <v-tooltip slot="append" bottom>
    
          <v-btn slot="activator" absolute fab dark left color="primary" @click="showPopup=true">
            <v-icon dark>add</v-icon>
          </v-btn>
    
          <span>Tooltip</span>
        </v-tooltip>
    
        <app-add-new-evaluator-modal @closePopup="closePopup($event)" @submit="addNewEvaluator" />
      </v-dialog>
    </v-app>

  • Variable "$pageNum" of required type "Int!" was not provided

    Hi all, I am having an error on GraphQL and Apollo says that "Variable "$pageNum" of required type "Int!" was not provided" That is my query type.

    enter image description here

    enter image description here

  • Vue.js dynamic classes

    I have some html using Vue.js here:

    <div id="app">
      <ul class="navbar-nav">
          <li class="nav-item" v-for="tab in tabs">
              <a href="#" class="nav-link">{{ tab.name }}</a>
          </li>
      </ul>
    </div>
    

    I have the javascript here:

    var app = new Vue({
      el: '#app',
      data: {
          tabs: [
            { name: "Home", active: "" },
            { name: "Challenges", active: "active" },
            { name: "Scoreboard", active: "" },
            { name: "About", active: "" }
        ]
      }
    });
    

    I want to set class to tabs.active since I'm using bootstrap. How can I do that?

  • How i change array in js get by key

    I have data return form controller

    foo:
    0:{id: 1, add_1: "123", add_2: "add1"} 
    1: {id: 2, add_1: "456", add_2: "add2"}
    

    How can I change the key to like this

    foo:
    id:{1,2}
    add_1:{123,456}
    add_2:{add1,add2}
    

    I'm try not change like this please help me

  • Correct usage of getters in vuex

    I'm currently developing an app with vue v2, and something got me thinking. It's kind of hard to find information for good practices so I decided I will ask here.

    I have a laravel api and vue for front end. Until now my models were such that will hold only a few objects (< 100), so I just put the in the state, and get what ever needed with a getter. Now I have a model that will hold > 10000 objects, so putting them all into the state is pretty much out the topic. The way I solve this problem is a have with action that gets a single object from the api by id, and put it in the state, after a check if its not in there already. The check happens with a getter that I'm also using when I need this object. So I have similar structure:

    // mutation
    [mutation_types.FETCH_SOMETHING](state, {something}) {
        if (!this.getters.getSomethingById(something.id)) {
            state.somethings.push(something)
        }
    }
    
    // action
    const {data} = await axios.get('~route~')
    commit(mutation_types.FETCH_SOMETHING, {something: data.something})
    
    // getter
    getSomethingById: state => id => {
        return state.somethings.find(something => something.id === id)
    }
    

    So this is working, but there are 2 problems that I see. The first is every time when I need a something I should call the dispatch to get the item from the api into the state and then the getter to get the actual object and the second problem is the check is happening after the api call, so even if I have this specific something in the state, I'm doing a request for it.

    A way to fix both of those problems that I though of calling the just working with the getter, which will check that state, if the searched ID is found in there it will be returned, if not, the dispatch will get it from the api and then return it.

    I feel like I'm adding logic to the getter that doesn't belong there, but I can't think of another way to achieve this. Is there something that I'm missing / doing wrong somewhere?

  • v-for not updating elements' position

    I'm using v-for with a computed property to create a list of 'parts'.

    <div v-for="(part,i) in orderedParts" :data-pos="part.pos" class="part-preview" >
        <component :is="'prev-part-'+part.type" :part="part" :position="part.pos" :page="page" :key="i"></component>
    </div>
    

    This works fine when loading first, but when updating the position properties of 2 parts, even though the orderedParts-property is computed again and receives the updated position-values, the list doesn't get updated.

    the component including the list receives the data object as a prop (page)

    Vue.component('cms-preview', {
      props:['page'],
    
      data: function () {
        return {
        }
      },
      methods:{
        byKey:function(key){
          return function (o) {
            var v = parseInt(o[key], 10);
            return isNaN(v) ? o[key] : v;
          };
        },
      },
      computed:{
        orderedParts: function () {
          console.log("!");
          console.log(JSON.stringify(this.page.parts,null,4));
          return _.sortBy(this.page.parts, this.byKey('pos'));
        }
      },
    
      template: '#cms-preview'
    });
    

    inside the prev-part-custom component, the content gets updated, but not the position values:

    <template id="prev-part-custom">
      <div>
        {{ part.pos }} - {{ position }}
        <div class="container-fullwidth prev-part-wrap" v-html="content">
        </div>
      </div>
    </template>
    
    Vue.component('edit-part-custom', {
      props:['contents'],
      data: function () {
        return {
          'content':this.contents[0]
        }
      },
      template: '#edit-part-custom'
    });
    
  • Initialize v-model using props?

    I'm trying to create a Vue component that uses v-model. The initial value of the v-model will eventually come from a parent component or data store. The first step I'm trying to get working is to initialize the v-model with a property. I've tried the following without success:

    <template>
      <div>
        <textarea
          v-model="text"
        ></textarea>
      </div>
    </template>
    
    <script>
    export default {
      props: { initialValue: String },
      data() {
        return {
          text: this.props ? this.props.initialValue : 'This is a test'
        }
      }
    }
    </script>
    

    And using it from a parent as follows:

    <MyComponent initialValue="Hello World" />
    

    The component displays 'This is a test' instead of 'Hello World' as I'd like. What is the proper way to initialize a component that is using a v-model?

    EDIT

    I've abandoned v-model for now and come up with this approach... but it doesn't feel very "Vue-ly".. I'm essentially tapping into implementation details of the textarea (eve.srcElement.value.length), when I feel like I should be tapping into a domain object... is there a better way to do this? Note, in the textChange event I'll eventually emit notifications for other components.

    <template>
      <div>
        <textarea
          :value="initialValue"
          @change="textChange"
          @keyup="textChange"
          placeholder="Type your text here"
        ></textarea>
      </div>
    </template>
    
    <script>
    export default {
      props: { initialValue: String },
      methods: {
        textChange: function(evt) {
          console.log('Length: ' + evt.srcElement.value.length)
        }
      }
    }
    </script>
    
  • Vue JS: How to create a table in Vue js to retrive data from json api.

    Looking to Change a current HTML view in Vue JS. Format this current HTML view: enter image description here found in https://codepen.io/numerical/pen/JvWMMR

        data: {
        activePage: 0,
        baseUrl: 'https://api.iextrading.com/1.0/stock/market/batch',
        chunkSize: 5,
        filters: ['change', 'changePercent', 'companyName','latestPrice',            'marketCap'],
        lastUpdated: false,
        quotes: [],
        refreshInterval: 60,
        symbols: [],
        transitioning: false,
        updateLoop: false
    },
    

    and make it like this table by getting/retrieving the json data. Thanks in advance! enter image description here found in https://codepen.io/bertog/pen/EjmpXm

          <td>{{quotes}}</td>
          <td>{{symbols []}}</td>