DEV Community: Max Walter

Laravel use Tailwindcss

Max Walter — Sun, 03 May 2020 14:03:02 +0000

yarn add tailwindcss --dev
npm install tailwindcss --dev

npx tailwindcss init

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').postCss(
    'resources/css/main.css',
    'public/css',
    [require('tailwindcss')]
)

app.blade.php

<link href="{{ mix('/css/main.css') }}" rel="stylesheet" />

vuejs use v-model within a custom component

Max Walter — Mon, 11 Nov 2019 09:55:40 +0000

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.

<input v-model="myValueVariable" />

But if you want to use v-model within a custom component you will realize that nothing happens.
Thats because there is no event that could trigger a v-model change. The event we are searching for is input.

this.$emit('input', yourValueVariabel)

Simple VUEX Guide

Max Walter — Sat, 02 Nov 2019 16:00:59 +0000

Vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Interacting with the Store

mapState

import { mapState } from 'vuex';

computed: {
  ...mapState([
    'title'
  ])
}

mapGetters

import { mapGetters } from 'vuex';

computed: {
  ...mapGetters([
    'title'
  ])
}

mapMutations

import { mapMutations } from 'vuex';

methods: {
  ...mapMutations([
    'ADD_SOMETHING'
  ])
}

mapActions

import { mapActions } from 'vuex';

methods: {
  ...mapActions([
    'DO_SOMETHING'
  ])
}

The Store itself

State Object:

This is how the state object could look like

state: {
    todos: [
        {id: 1, name: 'Do my Homework', done: false},
    {id: 2, name: 'Clean my Room', done: true},
    ]
}

Getters:

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  }
}

Mutations:

mutations: {
  increment (state, payload) {
    state.count += payload
  }
}

Actions:

Actions are similar to mutations, the differences being that:

Instead of mutating the state, actions commit mutations.

actions: {
  increment ({context, state}, payload) {
    context.commit("increment", payload);
  }
}

Persistent Store

// store.js
// yarn add vuex-persist
import VuexPersist from 'vuex-persist'

const store = new Vuex.Store({
  //...initialization
  plugins: [vuexPersist.plugin]
})