How can I define build flags while using laravel-mix 6?

2020-11-18 18:03 Gleb Krupakov imported from Stackoverflow

Official repo of Vue3 says:

Starting with 3.0.0-rc.3, esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

VUE_OPTIONS_API (enable/disable Options API support, default: true)

VUE_PROD_DEVTOOLS (enable/disable devtools support in production, default: false)

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:

webpack: use DefinePlugin

In the case of webpack, it is suggested to use DefinePlugin.

Since laravel-mix is a wrapper for webpack, how can I actually configure this flags?

See also questions close to this topic

vee validate duplicate messages in other components

i added vee validate in 3 of my seperate components and add messages for them and the messages are not the same but in all of my components they are the same.

<validation-provider
  v-slot="{ errors }"
  name="codeNumber"
  :rules="{ regex: /^\d{6}$/ }"
>
  <v-text-field
    v-model="codeNumber"
    :counter="6"
    :error-messages="errors"
    label="confirm"
    required
  ></v-text-field>
</validation-provider>

<validation-provider
  v-slot="{ phoneNumberErrors }"
  name="phoneNumber"
  :rules="{ regex: /^09\d{2}\d{3}\d{4}$/ }"
>
  <v-text-field
    v-model="phoneNumber"
    :error-messages="phoneNumberErrors"
    label="phone number"
    required
  ></v-text-field>
</validation-provider>

Pass Javascript Variable to Vue

How can i pass a Javascript Variable to a Vue Component?

I have this jQuery function which generates the menu and pushes all the Values inside the array menu:

var menu = [];

$(document).ready(function(){
    $('.service-desc-wrap h2,.cta-button').each(function(){
        if($(this).hasClass('cta-button')) {
            if($(this).attr('title') && $(this).attr('href')) {
                var linkTitle = $(this).attr('title');
                var href = $(this).attr('href');
                data = [
                    title = linkTitle, 
                    href = href,
                ]
                menu.push(data);
                $('#menu, #menuMobile').append('<a class="menuText" href="'+href+'">'+linkTitle+'</a>')
            };
        } else {
            var tag = $.slugify($(this).text());
            $(this).attr('id',tag);
            var linkTitle = $(this).text();
            if($(this).attr('title')) {
                var linkTitle = $(this).attr('title');
            };
                data = [
                    title = linkTitle, 
                    href = tag,
                ]
                menu.push(data);
            $('#menu, #menuMobile').append('<a class="menuText" href="#'+tag+'">'+linkTitle+'</a>')
        }
    }); 
});

I want to pass the array to a Vue Component called

<service-menu-component></service-menu-component>

The jQuery Function and the Component are inside a blade.php file, i'm using Laravel as a backend.

Integration of stripe payment in nuxt.js using vue-stripe-checkout npm package

I have a front end application build using nuxt.js and I am trying to integrate stripe payment using vue-stripe-checkout npm package https://www.npmjs.com/package/vue-stripe-checkout. I have followed all the steps as mentioned in the installation guide.

I am facing an error like Window is not defined and I am attaching the error screenshot. I will attached the codes that I have used. Any help is greatly appreciated.

Window is not defined

These are the configuration that I have used in nuxt.config.js file

head: {
    script: [
        { 
            hid: 'stripe', 
            src: 'https://js.stripe.com/v3/', 
            defer: true 
        }
    ],
},
env: {
    STRIPE_PK: process.env.STRIPE_PK,
},

plugins: [
    { src: '~/plugins/stripe-checkout', ssr: false },
],

build: {
    transpile: [ 'vue-stripe-checkout' ]
},

I have created a plugin inside plugins folder.

import Vue from 'vue';
import { StripeCheckout } from '@vue-stripe/vue-stripe';

export default () => {
    Vue.component('StripeCheckout', StripeCheckout);
};

Index.vue

<script>
    import StripeCheckout from 'vue-stripe-checkout'
    export default {
        components: {
            StripeCheckout,
        },
        data() {    
            return {
                publishableKey: process.env.PUBLISHABLE_KEY,
                payment_method_types: ['card'],
                items: [
                    {
                        price_data: {
                            currency: '',
                            product_data: {
                              name: '',
                              images: [
                                'imagefile.png',
                              ],
                            },
                            unit_amount: '',
                        },
                        quantity: 1,
                    },
                ],
                mode: 'payment',
                successUrl: '',
                cancelUrl: '',
            }   
        
        },
        methods: {
            checkout() {
                this.$refs.checkoutRef.redirectToCheckout()
            }
        }
    }
</script>

This is my checkout buttons

<stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
    >
    <template slot="checkout-button">
        <button @click="checkout"> Order Now</button>
    </template>
</stripe-checkout>

Laravel Mix and Tailwind CSS

I installed Tailwind using a tutorial and tried working around with a custom tailwind config file, but when I try to add first, last, or group pseudo-classes, it doesn't affect the CSS. I also previously noticed this with inset, and I added the inset section manually. Am I missing anything in config or Mix?

Tailwind config file

const { rotate } = require('tailwindcss/defaultTheme');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
      cursor: {
        'none': 'none'
      },
      opacity: {
        '0': '0',
        '25': '.25',
        '50': '.5',
        '75': '.75',
        '10': '.1',
        '20': '.2',
        '30': '.3',
        '40': '.4',
        '50': '.5',
        '60': '.6',
        '70': '.7',
        '80': '.8',
        '90': '.9',
        '100': '1',
      },
      zIndex: {
        '-1' : -1,
        '0': 0,
       '10': 10,
       '20': 20,
       '30': 30,
       '40': 40,
       '50': 50,
       '25': 25,
       '50': 50,
       '75': 75,
       '100': 100,
        'auto': 'auto',
      },
      inset: (theme, { negative }) => ({
        auto: 'auto',
        ...theme('spacing'),
        ...negative(theme('spacing')),
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        full: '100%',
        '-1/2': '-50%',
        '-1/3': '-33.333333%',
        '-2/3': '-66.666667%',
        '-1/4': '-25%',
        '-2/4': '-50%',
        '-3/4': '-75%',
        '-full': '-100%',
      }),
      colors: {
        white:'#ffffff',
        gray: {
          100: "#D2D2D2",
          200: "#BCBCBC",
          300: "#A5A5A5",
          400: "#8F8F8F",
          500: "#797979",
          600: "#626262",
          700: "#4C4C4C",
          800: "#353535",
          900: "#1F1F1F",
        },
        orange: {
          100: "#FFDFCC",
          200: "#FFCFB3",
          300: "#FFBF99",
          400: "#FFB080",
          500: "#FFA066",
          600: "#FF904D",
          700: "#FF8033",
          800: "#FF701A",
          900: "#FF6000",
        },
      },
      rotate:{
        '-180': '-180deg',
        '-90': '-90deg',
        '-45': '-45deg',
        '0': '0',
        '45': '45deg',
        '90': '90deg',
        '135': '135deg',
        '180': '180deg',
        '270': '270deg',
        '360': '360deg'
      },
      borderWidth: {
        DEFAULT: '1px',
        '0': '0',
        '2': '2px',
        '3': '3px',
        '4': '4px',
        '6': '6px',
        '8': '8px',
        '10': '10px',
        '12': '12px',
        '14': '14px',
        '16': '16px'
      },
      extend: {
        height:{
          '5.5/6': '91.6667%'
        },
        fontFamily: {
            sans: ['Arial', ...defaultTheme.fontFamily.sans],
        },
        transitionDuration: {
          '2000': '2000ms',
          '3000' : '3000ms',
        },
        transitionProperty: {
          'top': 'top',
          'left': 'left',
        },
        lineHeight:{
          12 : '3rem',
          13: '3.25rem',
          14: '3.5rem'
        },
      },
    },
    variants: (theme) => ({
      ...theme('variants'),
      padding: ['first','last'],
      margin: ['first','last'],
      backgroundColor: ['first'],
      textColor: ['first'],
      outline: ['active','focus'],
      position: ['first','last'],
      opacity: ['responsive', 'hover', 'focus', 'disabled'],
      borderRadius: ['hover', 'focus'],
      width:['group-hover']
    }),
    plugins: [
      require('@tailwindcss/ui'),
    ],
};

Laravel Mix File

const mix = require('laravel-mix');
const atImport = require('postcss-import');
const tailwindcss = require('tailwindcss');
mix.browserSync('localhost:8000');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/admin.js','public/js')
    .sass('resources/scss/app.scss', 'public/css')
    .sass('resources/scss/admin.scss','public/css')
    .options({
        processCssUrls: false,
        postCss: [ 
            atImport(),
            tailwindcss('./tailwind.config.js') 
        ],
    })
    .webpackConfig(require('./webpack.config'));

webpack error using vue.js in laravel project

I have the following error in a Laravel project using Vue.js

[Error] Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div class="container">
|         <div class="text-center" style="margin: 20px 0px 20px 0px;">
    ./resources/js/App.vue (app.js:48806:351)
    __webpack_require__ (app.js:48859)
    ./resources/js/app.js (app.js:1845:86)
    __webpack_require__ (app.js:48859)
    checkDeferredModulesImpl (app.js:49009)
    (anonymous function) (app.js:49022)
    (anonymous function) (app.js:49028)
    Global Code (app.js:49029)

I've tried using, which made no change:

npm install --save-dev css-loader

the files in question contain:

app.js

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

App.vue

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel & Vue</span>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Home</router-link>
                    <router-link to="/add" class="nav-item nav-link">Add Book</router-link>
                </div>
            </div>
        </nav>
        <br/>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {}
</script>

app.blade.php

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

webpack.mix.js

const mix = require('laravel-mix');
import css from "file.css";
  
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

I've been following the example given on the page https://shouts.dev/laravel-vue-crud-single-page-application-tutorial#step6

Strange output when building Tailwind through PostCSS (Laravel Mix)

I'm using Laravel Mix and PostCSS to build Tailwind.

Everything works, I can even Purge unused styles.

I have strange outputs when I build (a LOT of these) :

--tw-space-y-reverse [
   {
     index: 40,
     token: '-',
     type: 9,
     eval: [Function: sub],
     precedence: 1,
     show: '-'
   },
   {
     index: 40,
     token: '-',
     type: 9,
     eval: [Function: sub],
     precedence: 1,
     show: '-'
   }
]

I'm using the latest TailwindCSS version. Here is the relevant part of my webpack.mix.js :

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

let tailwindcss = require('tailwindcss');
mix.postCss('resources/css/tailwind.css', 'public/css/soumettre202101.css', [
  tailwindcss('./tailwind.config.js'),
]);

I don't even know where to start. I don't know what's causing this.

Any lead will be appreciated!

I can remove the output by disabling this core plugins (in my tailwind.config.js) :

module.exports = {
  corePlugins: {
    space: false,
    ringWidth: false,
    ringColor: false,
    ringOffsetWidth: false,
    ringOffsetColor: false,
    ringOpacity: false,
    divideOpacity: false,
    divideColor: false,
    divideWidth: false,
  }
}

Even more strange : if I only disable "space", the output changes from the one above to the same thing but with --tw-ring-width-reverse, as if the last plugin used produces the output...

O: How to organize a general chart component in vue.js
I don't know how to organize components for a general usage in vue.js.

I want to create at least three charts: a line chart, a bar chart and a pie chart. I have already built a line chart with canvas that carries the logic, calculates everything and draws the chart. I think all the charts will share some common features.

The chart wrapper could contain all static data, i.e. extreme values (minY, maxY, minX, maxY) and all labels. It could also contain some controls to interact with the chart, e.g. to draw the areas, draw a bold line or highlight each data point.

I can think of two solutions:

1. work with slots and v-slot
```
<App>
  <ChartControls // a general chart wrapper 
    :drawArea="true"
    :drawLine="false"
    v-slot="label"    
    > 
    <LineChart // one of the custom chart components
      :dataset="dataset"
    /> 
  </ChartControls>
</App>
```
Since I calculate all values in the Linechart component I have to transfer some of them to the parent (v-slot). But this violates the one-way-data-flow and I'm afraid I won't be able to think about it well later. And I have to import two components into my project.

2. create a main component and put all the stuff in there...
```
<App>
  <Chart
    :dataset="dataset"
    :drawArea="true"
    :drawLine="false"
    :type="'Line'" // or Bar, or Pie
  />
</App>
```
I know it's an opinion based question, but I'm stuck and any suggestion would be helpful.

How sould I approache my problem to organize components?
vue3 reactive unexpected behaviour
i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How???
```
const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false })

const handleSave = () => {
      const group = toRaw(newGroup)
      persist(group).then(() => {
        newGroup.id = undefined
        newGroup.name = 'demo'
        console.log(isReactive(group)) //say false but the group.name value is demo
      })
     
    }
```
destructuring the reactive obj as const group = { ...newGroup } looks like it works, still no understand why toRaw is not working.

EDIT:

the whole problem comes from a sense of lack of control when dealing with reactive objects for example:

the following cumputed object retrieves a list from the store which is then drawn in the template as rows of a table at which click the selected element is changed of state. in the function I am forced to deconstruct records to avoid that the modification trigger the change of enabled before it is persisted Is there a better way? Should I make readonly groups?
```
//in setup()
const groups = computed <Group []> (() => getters ['registry / groups'])

const toggle = (record: Group) => {
    const group = { ...record } 
    group.enabled = !group.enabled
    persist(group)
}

//in template
  <a-menu-item @ click = "toggle (record)">
```
Vue.js 3 - replace/update reactive object without losing reactivity
I need to update a reactive object with some data after fetching:
```
  setup(){
    const formData = reactive({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData = data //how can i replace the whole reactive object?
        }
      })
    })
  }
```
formData = data will not work and also formData = { ...formdata, data }

Is there a better way to do this?

Laravel 7 does not save user authorization

I do not have a logged in user.

After several page reloads the user is not logged in. Also, when sending an ajax request through vue, the user is also not authorized.

User:

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
//use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use App\Notifications\ResetPassword;
use App\Notifications\VerifyEmail;


class User extends Authenticatable
{

Middlewares:

protected $middlewareGroups = [
        'web' => [
                \App\Http\Middleware\EncryptCookies::class,
                \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
                \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
                \Illuminate\View\Middleware\ShareErrorsFromSession::class,
                \App\Http\Middleware\VerifyCsrfToken::class,
                \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
                'throttle:60,1',
                \Illuminate\Routing\Middleware\SubstituteBindings::class,
                \Illuminate\Session\Middleware\StartSession::class,
                \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        ],
];

How to make sure that the authorized user is saved?

How to display results in a laravel controller in Vue Template?

Please I have a return values in inside an array in a Laravel Controller. I want to display the in a Vue Template but am having Issue. I need Assistance please.

    public function search(Request $request)
    {  
      $batchResults = \DB::table('patient')
                            ->select('*')
                            ->join('registrations', 'patient.patient_id', 'registrations.patient_id')
                            ->where('patient.name', 'like', '%' . $request -> name . '%')
                            ->whereBetween('registrations.created_at', [date($request->from), date($request->to)])        
                            ->get();

                        $search = $request -> name;


                        return [ $batchResults, $batchResults ];

I want to dispaly [ $batchResults, $batchResults ] resut in vue Template

this is the console.log results

(2) [Array(1), "James Asay", __ob__: Observer]
0: [{…}, __ob__: Observer]
1: "James Asaye"
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array

Vue Component

searchBatch(){
          axios.post('/search-results', this.form).then((res)=>{
            this.batchResource = res.data
            this.display = true

            console.log(res.data)
          })
        }

Laravel Vue You may need an appropriate loader to handle this file type,

fresh Laravel installation on compiling files using npm run dev VUE file error "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Laravel Verion: "^8.12"

Package.json

 "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    }

blade file

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

app.js

require('./bootstrap');
import  Vue from  'vue'    
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
    el: '#app'
});

Hello.vue

<template>
    <div>
        Hello World!
    </div>
</template>
<script>
export default {

}
</script>

npm run dev

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div>
|         Hello World!

Related questions

How can I define build flags while using laravel-mix 6?

See also questions close to this topic