HI, to enable SSR you just need to set mode property to universal. No additional changes needed.
In Scutum v2.4.0 there is no mode property (deprecated), please use ssr: true to enable universal mode. Please check https://nuxtjs.org/guides/configuration-glossary/configuration-mode and https://nuxtjs.org/guides/configuration-glossary/configuration-ssr

Hi, thank you for your message. I’ll try to sort this out in next update. I’m not sure if it’s possible to get rid of all this warnings but I’ll do my best.

Hi Tomek, sounds good, thanks for the update.

Hi, sorry for the delay. Update is Queued for Review on Themeforest. Should be ready to download shortly.

Awesome, thanks for the update, Tomek!

Hi, I’m affraid that this is not possible at the moment.
In scutum.forms.common.dynamicFields function when removing fields, callback is called after item is removed so reference to that field is gone

.on('click', '.sc-js-section-remove', function (e) {
  ...
  $(this).closest('.sc-form-section').next('hr').remove().end().remove();
  if (typeof removeCallback !== 'undefined' && typeof removeCallback === 'function') {
    removeCallback();
  }
  ...
});

Try this way
1. Open scutum_common.js, find scutum.forms.common.dynamicFields function, and add

 
.on('click', '.sc-js-section-remove', function (e) {
    ...
        // this is the reference to dynamic field that will be removed
    var $el = $(this).closest('[data-field-index]')
    scutum.$win.dynamicFieldsLastRemoved = {
        index: $el.attr('data-field-index'),
        el: $el
    }
    ...
});

2. Open forms-dynamic_fields.html, and add data-field-index="{{ index }}" to .sc-form-section

<script id="fields-template" type="text/x-handlebars-template">
  <div class="uk-card-body sc-form-section{{#if_even index}} md-bg-grey-100{{/if_even}}" data-field-index="{{ index }}">
  </div>
</script>

3. open assets/js/views/forms/dynamic-fields.js, and replace all content with the following code

scutum.dynamicFields = {};
scutum.dynamicFields.init = function () {
    // dynamic fields
    scutum.forms.common.dynamicFields(null, true, false, null, scutum.dynamicFields.removeCallback);
};
scutum.dynamicFields.removeCallback = function () {
    console.log(scutum.$win.dynamicFieldsLastRemoved)
}

Now in scutum.$win.dynamicFieldsLastRemoved you will have the index and the DOM element of the removed item.

Thanks and this is brilliant! How we looking on the release with RTL?

Hi, update should be ready for download shortly. It’s now queued for review.

Sorry for the delay. Please check your email.

Hi, unfortunatelly, it’s not possible. Scutum has been built using the nuxt framework and it’s using all the features that nuxt provides (ssr, vuex, page based routing etc.). Please send me message through support page https://themeforest.net/item/scutum-professional-material-design-uikit-admin-template/23542323/support I’ll help to understand this integration and how to use it.

Hi, thank you for your kind words
Scutum Admin is based on the UIkit framework so you can use any component from that framework.
Please check https://getuikit.com/docs/search

Great, thanks!

Hi Tomek, any update on RTL? Thanks!

Hi, I need few more days to finish this update. I think it will be reready next week. Sorry for the delay.

Thanks Tomek, looking forward to seeing what you conjure up in the next update!

Hi Tomek, when is update anticipated? Thanks!

Hi, I’m really sorry for the delay. I’ve just uploaded new version to themeforest, should be ready for download shortly.

Hi, please check the motivation behind this integration here https://dev.to/skyrpex/create-a-spa-with-laravel-and-nuxt--54k
If you like you can use separate instances of nuxt and laravel.
This integration is only in laravel-nuxt/ folder, you can use src/ folder if you want separate instance.

Hi, there is already class ‘sc-uk-dropdown-close’ that you can use to close dropdown on menu item click

<ul class="uk-nav uk-nav-navbar">
    <li><a href="pages-user_profile.html" class="sc-uk-dropdown-close">Profile</a></li>
    <li><a href="pages-settings.html" class="sc-uk-dropdown-close">Settings</a></li>
    <li><a href="login_page.html" class="sc-uk-dropdown-close">Log Out</a></li>
</ul>

Update should be ready before end of this week.

Hi, please check your email.

Thank you. This works great for getting the page-aside to the right, but it still scrolls. I’d like the aside content to be fixed on the page. I’m coming from a Bootstrap background and am just now learning uikit and your sc-* classes so I’m still dealing with a rather steep learning curve. Here is how I have the page setup:

<template>
    <div id="sc-page-wrapper" class="uk-flex uk-flex-column">
        <div id="sc-page-wrapper-inner" class="uk-flex">
            <div id="sc-page-content" class="sc-padding-remove uk-height-1-1">
                <Newsfeed></Newsfeed>
            </div>
            <div id="sc-page-aside" class="uk-visible@s">
                <div class="sc-page-aside-body">
                    <RightSidebar></RightSidebar>
                </div>
            </div>
        </div>
    </div>
</template>

Can you tell me what I’m missing to keep the output of RightSidebar fixed, but the Newsfeed able to scroll?

Thanks again.

Hi, enable fixed page and try again

mounted () {
    // set fixed page
    this.$store.commit('setPageFixed', true);
},
beforeDestroy () {
    // unset fixed page
    this.$store.commit('setPageFixed', false);
},

Thanks. That works once I added:

<div id="sc-page-top-bar" class="sc-top-bar" hidden="" />

between the sc-page-wrapper and sc-page-wrapper-inner divs.

Sadly I won’t be using this method as it breaks good UX practices by using it’s own scroll bar down the center of the page and not the browsers scroll-bar on the right. The bootstrap style “affix” is what I was after. As a future enhancement I’d love to see something like that.

Thanks for the help.

Hi, Sorry for the late reply. To change the raty icons please open assets/css/plugins/raty(.min).css and add at the bottom

.star-off-png:before {
    content: "\f765";
}
.star-on-png:before {
    content: "\f764";
}

Hi, yes, I’m still supporting this template.
If you have any suggestions/requests please let me know.

vue.js 1. x-editable 2. ecommerce pages

Thank you for the suggestions, I’ll add them to todo list.

To hide side menu you can use this method

UIkit.offcanvas(scutum.$sidebarMain).hide()

Works great, thanks!

Hi, I’ve just tested exanded header and the card full screen function and it works ok. Here is the code that I’m using:

<html class="sc-page-fixed sc-header-expanded">
<head>
    ...
</head>
<body>
    ...
    <div id="sc-page-wrapper" class="uk-height-1-1">
        <div id="sc-page-content" class="uk-height-1-1 uk-overflow-auto">
            <div class="uk-child-width-1-3@l uk-child-width-1-2@s uk-grid" data-uk-grid>
                <div>
                    <div class="uk-card">
                        <div class="uk-card-header">
                            <div class="uk-flex uk-flex-middle">
                                <div class="uk-flex-1">
                                    <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                                    <p class="uk-text-meta"><time datetime="2019-01-01">Jan 01, 2019</time></p>
                                </div>
                                <div class="sc-actions">
                                    <a href="#" class="sc-actions-icon mdi mdi-fullscreen sc-js-card-fullscreen"></a>
                                </div>
                            </div>
                        </div>
                        <div class="sc-card-content">
                            <hr class="uk-margin-remove">
                            <div class="sc-padding-medium">
                                Lorem ipsum dolor...
                            </div>
                            <div class="sc-card-content-more">
                                <hr>
                                <div class="sc-padding-medium">
                                    <strong>Content visible when card is in fullscreen mode.</strong><br>
                                    Lorem ipsum dolor sit amet...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    ...
                </div>
                <div>
                    ...
                </div>
            </div>
        </div>
    </div>
</body>
</html>

What I meant was take pages-blank_header_expanded.html and put the card in the main uk-card-body and then it doesn’t fill the page.

Hi, Sorry for the late reply. I have just tested this layout and it works well, please check

<div id="sc-page-wrapper">
    <div id="sc-page-content" class="uk-height-1-1 uk-flex uk-flex-center sc-page-over-header">
        <div class="uk-width-5-6@m">
            <div class="uk-card uk-height-1-1 uk-flex uk-flex-column">
                <div class="uk-card-header">
                    <h3 class="uk-card-title">Expanded header</h3>
                </div>
                <hr class="uk-margin-remove">
                <div class="uk-card-body sc-padding-remove uk-flex-1" data-sc-scrollbar>
                    <div class="sc-padding">
                        <div class="uk-card uk-margin">
                            <div class="uk-card-header">
                                <div class="uk-flex uk-flex-middle">
                                    <div class="uk-flex-1">
                                        <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                                        <p class="uk-text-meta"><time datetime="2019-01-01">Jan 01, 2019</time></p>
                                    </div>
                                    <div class="sc-actions">
                                        <a href="#" class="sc-actions-icon mdi mdi-fullscreen sc-js-card-fullscreen"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="sc-card-content">
                                <hr class="uk-margin-remove">
                                <div class="sc-padding-medium">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet animi atque aut consectetur dolor doloremque eaque eius error esse exercitationem expedita fugiat id ipsa, itaque iusto laudantium maiores modi molestiae nam nesciunt nobis non nostrum numquam obcaecati perferendis provident qui suscipit tempora tempore ut voluptates voluptatum! Ad aut excepturi, fugit harum ipsum quia reiciendis reprehenderit? Aliquam animi consectetur debitis, delectus deleniti doloribus eos eum explicabo facilis hic laudantium maxime molestias, nemo quia quisquam rerum, sapiente sunt. Accusantium, at autem consequatur dolor earum inventore ipsa ipsum, labore nam neque numquam quam quod totam ullam veritatis. Fugit modi molestias quae.
                                </div>
                                <div class="sc-card-content-more">
                                    <hr>
                                    <div class="sc-padding-medium">
                                        <strong>Content visible when card is in fullscreen mode.</strong><br>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam at debitis inventore itaque labore nostrum? Aspernatur, consequuntur, rerum. Esse explicabo fugit illo in ipsam iusto laborum, magnam minima non odio, perspiciatis placeat possimus praesentium quidem saepe similique vel voluptatum! Aliquam aspernatur corporis deserunt doloremque est eum fugit illum ipsa maxime minus molestias numquam, obcaecati possimus quas reiciendis sint unde voluptatum? Adipisci corporis culpa delectus, dolore eaque esse hic, ipsam laboriosam, nobis quasi quod ratione repellat repellendus ullam voluptate? Ab amet, atque corporis cupiditate deleniti eaque eius est eum eveniet ex excepturi fugiat in laboriosam minima necessitatibus nemo nisi nulla odio perferendis placeat porro praesentium quae quas quibusdam repellat, rerum sint soluta vitae, voluptatem voluptatum! Consectetur culpa cupiditate, eius maxime neque nobis odit possimus qui reiciendis repellat, sed tempore tenetur veritatis! Aliquam at blanditiis distinctio doloremque eos incidunt iste perspiciatis provident quos rem, repellendus reprehenderit rerum suscipit tempora ullam vero, voluptates? Aliquid blanditiis delectus deleniti, dolor doloribus eum explicabo iste laboriosam nisi nostrum odio odit possimus quidem repellat voluptas? Ab aliquam animi architecto blanditiis delectus dicta dolor doloribus earum, eveniet excepturi expedita inventore maxime minus molestiae nesciunt nihil nisi nulla officia optio provident quasi quis quod rem repellendus soluta veniam.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

There in such class in Scutum Admin but I’ll add it in next release.

Actually I think I might have the syntax wrong, I think it’s hints: [], sorry for bothering you.

No problem, I’m glad you figured it out.

Hi, I’m not sure but I’ll try to release new version before end of the May.