adds localized strings for next and previous in multi-step action buttons

simplify step examples for multi-step guide

adds section keys diagram and data table

adjust plugin introductory sentence

adds conclusion CTA to laravel guide

adds for code examples

copy edits for laravel guide

@GustavoFenilli @justin-schroeder first draft of the docs for this can be seen here: https://formkit-q21ga1q2y-formkit.vercel.app/plugins/multi-step

adds @formkit/inputs as a dependency of @formkit/addons

Going to switch my attention to the docs but would love for someone else to try using this and see how it feels as an end-user.

Basic usage

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createMultiStepPlugin } from '@formkit/addons'
import '@formkit/addons/css/multistep.css'

const config = defaultConfig({
  theme: 'genesis', 
  plugins: [createMultiStepPlugin()],
})

export default config

// myComponent.vue
<template>
  <FormKit type="form">
    <FormKit type="multi-step">

      <FormKit type="step" name="personalInfo">
        <FormKit
          type="text"
          label="My Name"
          prefix-icon="avatarMan"
          validation="required"
        />
      </FormKit>
    
      <FormKit type="step" name="references">
        <FormKit
          type="textarea"
          label="Please supply 2 references"
          validation="required"
        />
      </FormKit>

      <FormKit type="step" name="Supplemental">
        <FormKit
          type="textarea"
          label="Why do you want to work here?"
          validation="required"
        />
        <FormKit
          type="radio"
          label="How did you hear about us"
          validation="required"
          :options="[
            { label: 'Google', value: 'google' },
            { label: 'Facebook', value: 'facebook' },
            { label: 'Twitter', value: 'twitter' },
            { label: 'Friend', value: 'friend' },
          ]"
        />

        <!-- example of providing a submit button on the last step -->
        <template #stepNext>
          <FormKit type="submit" />
        </template>
      </FormKit>

    </FormKit><!-- multi-step -->
  </FormKit><!-- form -->
</template>

You should end up with something that looks like this to start:

include importable CSS as part of build process

improvements to multi-step styling and prop behavior

tests to ensure multistep and step components mount and have expected behaviors

Despite the TypeScript warning, worked just fine. Thanks for the great job.

Does this error persist if you restart VSCode's typescript server?

fix typo in docs

@vctrtvfrrr /dist/ no longer required in the path for the @next tag. try import genesis from "@formkit/themes/tailwindcss/genesis";

add warning in docs about beta.14 import of genesis for Tailwind

This has been published under the @next tag

@aerophobic @michelveloso can you try 1.0.0-beta.15-3995886 which can be installed with the @dev tag? Should be working. I'll publish it under the @next tag shortly.

Nuxt 3.1.1 includes a fix for this issue on their end: https://github.com/nuxt/nuxt/pull/18494

Not sure if there's benefit to the included addComponent calls now.

Ah really? Just worked around it with #563. 😄

Ok, so tried doing a FormKitSchema without it being in the plugin and without an import, and it renderers client side with a hydration error warning. It does not throw the server error if you manually write an import in the file you're using it in as you mentioned earlier, @justin-schroeder.

I'm adding all 4 components that the @formkit/vue package exports at the moment so that things are rendered via SSR successfully without the Nuxt user needing to write a manual import statement.

• FormKit
• FormKitSchema
• FormKitMessages
• FormKitIcon

adds FormKitMessages and FormKitIcon to pre-registered nuxt components

fixes import

Whoops — tried to clean out the prettier formatting but I also nixed the import.

known components in Nuxt.

If one of you fine gentlemen could try this locally with npx formkit create-app and confirm you don't get any SSR hydration issues on a hard reload I would appreciate it!