Ответы пользователя по тегу Vue.js
  • Vuetify v-text-field rules not work?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    В общем, баг в том, что если в поле ничего нет то выдает ошибку.
    Если добавлены правила валидации то нельзя добавлять опцию, параметр clearable и обязательно выставить начальное значение. Будь то строка или номер.

    Естественно в доках ето не указано. Потому что там самый примитивные v-model case без vuex.

    так не сработает
    v-model="this.fields.newPassword"

    для дефолта
    :value="this.fields.newPassword"
    но нельзя ставить clearable
    <v-text-field
                                    :rules="[rules.min, rules.required]" <<< ---- REMOVE if clearable 
                                    :value="this.fields.newPassword" <<< ---- ADD
                                    type="password"
                                    autofocus
                                    background-color="#f0f0f0"
                                    clear-icon="fas fa-times"
                                    color="#0b236b"
                                    placeholder="New password"
                                    solo-inverted
                                    flat
                                    clearable <<< ---- REMOVE if rules 
                                    required
                                    counter
                                    class="caption"
                                    :color="this.violations.newPassword?'red':'#0b236b'"
                                    :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
                                    :type="show2 ? 'text' : 'password'"
                                    @click:append="show2 = !show2"
                                    hint="Password must be at least 8 characters, contain an
                                                    upper case letter and a number."
                                    @change="updateField({ fields: [ {fieldName:  'newPassword', fieldValue: $event,}, ], })"
                            />
    Ответ написан
  • Преимущества Vuex dynamic Modules?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    perfomance boost. Чем больше нагружен store (чем больше там храним) тем выше в динамической подгрузке модулей, в бд lazy loading.
    Ответ написан
  • Как использовать плагины для cordova в шаблонах vue?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    ушло реально много времени, часов 15-20, мало примеров, доки голые, а дебаг приложения вообще жесть, сделал билд, отвалился, сиди гайдай почему так.


    <template>
        <div>
            <h1 v-text="this.title"></h1>
            <hr>
            <h1 v-text="this.steps"></h1>
            <hr>
            <small>
                Above should be number
            </small>
        </div>
    </template>
    
    <script>
          import Vue                      from 'vue';
        import {mapActions, mapGetters} from 'vuex';
        import {SESSION}                from '../store/modulesNames';
    
        export default {
            layout:   'default',
            data:     () => (
                {
                    title: 'Steps:',
                    test: 0,
                }
            ),
            computed: {
                ...mapGetters(
                    SESSION,
                    {
                        steps: `getSteps`,
                    }
                ),
            },
            methods:  {
                ...mapActions(
                    SESSION,
                    {
                        updateSteps: `updateSteps`,
                    }
                ),
    
                error (err) {
                    alert(`Something went wrong, please contact support`);
                    alert(JSON.stringify(err));
                },
                startWatch () {
    
                    const offset = 0;
                    const options = {
                        pedometerIsCountingText:      'SGX counts your steps',
                        pedometerStepsToGoFormatText: '~%s steps to finish',
                        pedometerYourProgressFormatText: '~%s progress',
                        pedometerGoalReachedFormatText: '%s congrats finish!',
                    };
                    const goal = 1000;
                    window.stepper.setGoal(goal, ()=>{}, this.error);
                    window.stepper.startStepperUpdates(
                        offset,
                        this.updateStepsSuccess,
                        this.error,
                        options
                    );
                },
                updateStepsSuccess (result) {
                    const {steps_today, total, average} = result;
                    // alert(JSON.stringify(result));
                    this.updateSteps({steps: steps_today});
                },
            },
            mounted () {
                document.addEventListener('deviceready', () => {
                    alert('Device ready event fired!');
                    this.startWatch();
                });
    
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>


    Там еще отвалились иконки и другие фонты.
    Уже сделаю в другой раз.
    Дока плагина

    Пример который был взят за основу
    Ответ написан
  • Добавить кглобальные стили из дочернего компонент?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Пришлось отказаться от иморта стилей в index.ts входная точка компиляции проекта. У вас может быть app.js | .ts или main.js | .ts
    И сделать импорты в лейаут компонентах
    import {Component, Vue} from "vue-property-decorator";
    import * as Template    from './_template.html?style=./_styles.scss'
    import CSSModules       from 'vue-css-modules';
    import stylesCommon     from '@/assets/common/scss/common.scss'; // хотя эти стили использованы везде
    import stylesFonts      from '@fortawesome/fontawesome-free/css/all.css'; // как и эти
    import * as styles      from './_styles.scss'
    // https://github.com/fjc0k/vue-css-modules
    Vue.mixin(
        CSSModules(
            {
                // be careful, 'class' also use by 3-d parties libs classes
                injectAttr: 'class',
                // styles are merged with this.$style by default
                styles:     {...stylesFonts, ...stylesCommon, ...styles},
            }
        )
    );
    @Template
    @Component
    export default class LayoutDefault extends Vue {
        mounted() {
        }
    };


    Выходит в разы больше кода, пока ничего друго не придумал.

    Так же может быть полезным метод который исопльзует пакет
    var CSSModules = function CSSModules(params) {
      var injectAttr = params.injectAttr || undefined,
          styles = params.styles || undefined,
          mergeDefault = params.mergeDefault || false;
      return {
        beforeCreate: function beforeCreate() {
          this.original$createElement = this.original$createElement || this.$createElement;
          this.original_c = this.original_c || this._c;
          this.$createElement = _createElement.default.bind(this, {
            createElement: this.original$createElement,
            context: this,
            styles: styles,
            injectAttr: injectAttr,
            mergeDefault: mergeDefault,
          });
          this._c = _createElement.default.bind(this, {
            createElement: this.original_c,
            context: this,
            styles: styles,
            injectAttr: injectAttr,
            mergeDefault: mergeDefault,
          });
        }
      };
    };

    через this.bind но он куда грязнее.

    Есть у кого идеи получше?
    Ответ написан
  • Vue + TypeScript css modules?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    И так, спустя часов 5-6 нашел решение, и даже больше чем одно

    1 - использовал данный плагин инжектил миксоном в главном файле main.ts.
    2 - console.log console.log(CSSModules({ как должно работал
    3 - важно указать аттр пареаметрinjectAttr: 'class', что бы избежать class="$style.container" обращения к параметру $styles
    4 - $style действительно не будет работать, для того что бы он работал необходимо прописывать какие -то трюки с .d.ts файлом
    // 1. Make sure to import 'vue' before declaring augmented types
    // 2. Specify a file with the types you want to augment
    //    Vue has the constructor type in types/vue.d.ts
    declare module 'vue/types/vue' {
        // 3. Declare augmentation for Vue
        interface Vue {
            // $style: { [key: string]: string }
            $style: any
        }
    }


    но у меня пока не вышло заставить работать $style, хотя модули и css работает какд олжно ввиду миксина и пакету упомянутого выше а еще надо было сделать доп трюки
    5 - прописать файл на css

    declare module '*.css' {
        import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue'
    
        interface Template2 {
            <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
    
            <V extends typeof Vue>(component: V): V
        }
    
        const template2: Template2;
        export = template2
    }


    6 - прописать файл на scss
    declare module '*.scss' {
        import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue'
    
        interface Template {
            <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
    
            <V extends typeof Vue>(component: V): V
        }
    
        const template: Template;
        export = template
    }


    то есть 3 модуля *.css / *.scss / *.html в .d.ts файлах, можно по идее поместить в один файл ,пока выдает ошибки, эксперементирую
    7 - дописать стили import Template from './app.pug?style=./app.scss'
    8 - и последнее что мне пришлось сделать, удалить папку сборки, build / dist. После новой сборки заработали стили, но пока без модулей

    UPD - что бы заставить работать глобальные и локальные стили пришлось использовать 3+ плагинов разом
    import * as Template from '@/index.html?style=./index.scss'
    import * as test from '@/index.scss';
    
    //   миксин для инжекта local css которые подтянуты template-loader  '@/index.html?style=./index.scss'
    Vue.mixin(
        CSSModules({
            // be careful, 'class' also use by 3-d parties libs classes
            injectAttr: 'class',
            // styles are merged with this.$style by default
            styles: {...stylesFonts, ...stylesCommon, ...test},
        }),
    );

    обратите внимание, $style параметр недоступен, мне было лень танцевать с еще один модулем для TS, может быть потом или кто подскажет как сделать.
    "vue": "^2.6.11",
        "vue-class-component": "^7.2.3",
        "vue-css-modules": "https://github.com/BonBonSlick/vue-css-modules.git", // для инжекта стилей в $style
        "vue-template-loader": "^1.1.0", // для инжекта стилей в сборку, без етого css-modules не работает
        "vue-property-decorator": "^8.4.2", // для рендеринга

    + пакет вебпака, typescript и проч.

    Вот что в шаблоне
    <h1 :class="[$style.hello, $style['text-danger']
        >
            can be used without mixin, but no global styles, $style still not accessible
          style "text-danger" is not available!
        </h1>
        <hr>
        <h2 class="hello">
            injected with template-loader and mixin, global and local styles available. modules
        </h2>


    В общем, пока приходиться исопльзовать mixin для инжекта стилей, в противном случаей где первый вариант с $style переменной, IDE не выдает подсказок, возможно проблему решит TS Plugin упомянутый ниже, но пока хз, и так времени угробил много
    h1 class="XD_i__hello text-danger">
              can be used without mixin, but no global styles, $style still not accessible
          style "text-danger" is not available!
        </h1> 
    <h2 class="XD_i__hello _2qzp__text-danger">
            injected with template-loader and mixin, global and local styles available. modules
        </h2>

    ушло около 7 часов на танци с бубнами.
    На самом деле, слишком много мусора пришлось перекопать, говорил ранее что гайды и примеры с гита устарели
    Вот некоторые из ресурсов которые использовались
    1. https://github.com/fjc0k/vue-css-modules
    2. https://github.com/ktsn/vue-template-loader/tree/m...
    3. https://github.com/ktsn/vue-template-loader
    4. https://github.com/mrmckeb/typescript-plugin-css-m...
    5. https://github.com/nuxt/typescript/issues/35
    6. https://habr.com/ru/post/458632/
    7. https://medium.com/@sapegin/css-modules-with-types...
    8. https://stackoverflow.com/questions/53997704/vue-t...
    9. https://dev.to/georgehanson/building-vuejs-applica...
    10. https://github.com/kaorun343/vue-typescript-exampl...
    11. https://github.com/kaorun343/vue-typescript-example-2
    12. https://github.com/Azure-Samples/vue-cosmosdb/tree...

    https://github.com/wemake-services/wemake-vue-template

    Я потом еще раз пройдусь и посмотрю как бы использовать по меньше слоев, шин, прослоек и прочего говна, пока надо теперь разгрести текущий адь в который превратился проект после TS интеграции.
    Если у кого есть идеи лучше, бду признателен

    Хотя
    <main :id="$style.app"
    пока отваливается т.ке. $style === undefined для этого необходимо добавить еще одну щину к уже существующим css /scss / html

    declare module '*.vue' {
        interface Vue {
            $style: any
        }
    
        export default Vue;
    }

    тут происходит дичайшая магия, т.к. .vue файлов у меня нет все компилируется в dist папочку.
    Пологаю, вебпаке и пакеты, модули, плагины подгружают и парсят друг друга по кругу в скрытом глазу порядке. Так что на каком-то этапе когда идет компиляция extends Vue как шаблонов,идет инджект $styles
    Ответ написан
  • TS2769: No overload matches this call?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Что я понял спуста почти 2-е суток поиска почему не работает, так это то, что 80% гайдов и примеров на git устарели ввиду оверкучи BС.

    Вот пример нерабочего варианта, не знаю почему не работает
    import Template from '@/index.html'
    
    
    @Template
    @Component({
        router,
    })
    class Main extends Vue {
    }
    
    const vm = new Main();
    vm.$mount('#app');

    вот так надо было, не знаю почему именно, казалось по гайдам и некоторым демо проектам так у них работает, возможно старые версии шин действительно могли спарсить
    import * as Template from '@/index.html'
    
    @Template


    Вот шина
    declare module '*.html' {
        // import Vue = require('vue'); // так будет выкидывать  ошибки, СЛОМАНО
    
        import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue';
    
        interface WithRender {
            <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U // для устранения BC используем 2 типа.
    
            <V extends typeof Vue>(component: V): V
        }
    
        const withRender: WithRender;
        export = withRender
    }

    Заставил работать прочитав десятки статей и гайдов, гитхаб ишшус и разборав демо проектов.

    Если возникла аналогичная ситуация при попытке убрать .vue шаблоны и испльзовать Angular style вам стоит искать ошибки в данных файлах

    1. app.ts он же amain.ts или index.ts который entry_point для webpack.
    2. tsconfig.json
    3. package.json
    4. yarn.lock и node_modules - их надо удалить при повышении версий пакетов
    5. webpack.config.json
    6. html.shim.d.ts


    менее вероятны
    1. index.html - который парсит ваш сервер nginx или апач
    2. index.html - который указан для главного MainApp который мы .$mount('#app'); у меня выше в ответе он показан
    3. html.shim.d.ts - возможно вы используете старую версию
    4. ваш .ts файл компонента


    По началу у меня были конфликты версий, шина и vue старые а декораторы новые.
    В общем, десятки нюансов, а ошибки как всегда указывали чертикуда.
    Ответ написан
  • Vue css modules?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    1 - все миксины scoped by default вне зависимости от того указаны они как scoped или нет
    2 - иvпорт глобальных стилей теперь только через import()
    import stylesss from '@/assets/common/scss/common.scss';

    Потому что все стили которые идут в module style блоке, по дефолту scoped!
    3 - стили можно так же передавать через prop
    4 - можно использовать миксины, плгин пример

    common scss вроде BS 4 в глобальный миксин.
    Локальные миксины это те которые передаем в миксин и те которые в css style блоке компонента.
    Плагин рабочий, протестировал, там есть форк с фиксами.
    Можно и самому более простую версию сделать, изначально я сделал миксин глобальный для css и там делал импорт главных стилей, что собственно мне и надо было. Плагин позволяет сделать это чуть более удобнее, подробности в описании.
    Дважды миксин плагин нельзя использовать, а инчае перепишет предыдущий. Это можно доработать сделав форк. Или передавать стили как props, vuex state, или все впихнуть в один супер минифицированный и обфусцированный файл, делать упомянутые импорты в каждом компоненте.

    Все выше, решает проблему коллизий и кривой подгрузки стилей когда ордер разный, а так же сильно минифицирует стили.
    Ответ написан
  • Boolean prop в компоненте выдает всегда true когда даже false?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Немножко непредсказуемо и в доках нет ничего про это
    logged-in="{{ Auth::check() }}">
     logged-in="{{ json_encode(Auth::check()) }}">
     logged-in="{{ json_encode(false) }}">
    logged-in="false">
    
     loggedIn: {
                    type: String, // вместо Boolean
                    required: true,
                }
    
    console.log(this.loggedIn === "false");
    // 1 - undefined
    // 2 - true
    // 3 - true
    // 4 - true


    Вывод булевых значений через php, надо оборачивать в json_encode(), в остальных случаях Vue обычно сам оборачивает все в json.
    Ответ написан
  • Uncaught TypeError: $(...).summernote is not a function?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    В общем, нашел решения, потратил сутки.

    1 - инициализировать в init() функции где она у вас есть
    init(){
                $(document).ready(() => {
                    $('#summernote').summernote();
                });
            },


    2 - инициализировать в требуемых пакетах для разработки (обязательно в правильном порядке)
    window._ = require('lodash');
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
    .....
    require('summernote');


    3 - добавить файлы webpack.mix.js (обязательно в правильном порядке)
    const { mix } = require('laravel-mix');
    const laroute = 'public/js/laroute.js';
    const File = mix.config.File;
    
    mix.styles([
        'node_modules/font-awesome/css/font-awesome.min.css',
    .....
        'node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
        'node_modules/summernote/dist/summernote.css'
    
    ], 'public/css/vendor.css').version();
    
    mix
        .js('resources/assets/js/jquery.js', 'public/js')
    .....
        .js('resources/assets/js/summernote.js', 'public/js')


    Дополнение - спустил на 0.0.1 версию назад, так меньше риск возникновения конфликтов.
    Дополнение - убрать весь треш который подключал через теги script / link
    Ответ написан