Jetstreams Inertia vue 3 setup... but with typescript

Related tags

Projects Using Vue.js laravel typescript inertia vue3 inertiajs
Overview

Jetstreams Inertia vue 3 setup... but with typescript

It took me hours to actually get this working... So to save my self future efforts and potentially anyone else, here's everything you need

Some minor changes I made:

  • Reorganized Jetstream components to be in a more structured fashion
  • Added vues "name" property to all components (this will help some ides find the component to import when working in SFC)
  • Switched all components to vue 3's typescript "defineComponent()" structure
  • Additional minor configuration in webpack.mix.js for typescript compilation
  • Global typedefs for ziggy

I'm not sure if I missed/broken anything, if you find anything, let me know, or kindly submit a pr :)

I think for the most part, you should be able to directly copy everything into the root of your laravel application... but be sure to manually compare package.json - I included this so you have all necessary packages.

You might also like...
💙 A simple but consistent user interface made for Vue

Vi-Ui Read the documentation Install: Using NPM: npm install --save vue-vi-ui Or the CDN: script src="https://unpkg.com/vue-vi-ui/dist/vi-ui.min.js"

Vitta 42 Jul 17, 2022
Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue + Python/Flask + WebSockets.
Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue + Python/Flask + WebSockets.

Streamsync Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue.js + Python/Flask + WebSockets. By avoiding a rerun of th

Ramiro Medina 101 Dec 11, 2022
A small but complete CRUD web App with Vue and json-server
A small but complete CRUD web App with Vue and json-server

A small but complete CRUD web app with Vue + element-ui + axios + json-server

Flying Li 3 Nov 6, 2022
M4x1m3's theme maker, but in a desktop app

Omega Theme Maker App M4x1m3's theme maker, but for desktop! Build: $ git clone https://github.com/ArtichOwO/OmegaThemeMakerApp $ cd OmegaThemeMakerAp

ArtichautCosmique 15 Dec 15, 2022
It's the same as Google Keep but you can have unlimited subtasks for each and every one of your main tasks!

SAD-KEEP It's the same as Google Keeps but you can have unlimited subtasks for each and every one of your main tasks! You can see it live: Sad-keep de

Sadaf 2 Aug 6, 2022
Enables creating databases based on files in Obsidian - like Dataview, but with editing!
Enables creating databases based on files in Obsidian - like Dataview, but with editing!

Obsidian Database Plugin Do you like Dataview plugin for Obsidian? This one is taking Dataview to next level, but not only allowing you to view the da

Łukasz Tomaszkiewicz 115 Jan 4, 2023
Goldfish.Social clone but with text, image & video posts.

Goldfish Social Meow there! Welcome to the Goldfish Social repo, this project is intended as a free open source alternative to (former) Vine and (curr

@stux 2 Aug 16, 2022
Vue Todo App with Typescript and Vue 3
Vue Todo App with Typescript and Vue 3

Vue Todo App with Typescript and Vue 3

Hoang Hoa 5 Aug 5, 2022
A minimal sample configuration with vue, vuex, vue-router, vuetify, Typescript and cesium.
A minimal sample configuration with vue, vuex, vue-router, vuetify, Typescript and cesium.

vue-stack-cesium A minimal sample configuration project which shows how to combine and use certain packages and is a useful testing project for new up

Gerhard Mesch 14 Dec 23, 2022
Comments
  • Issue with this.$inertia.form not existing

    Issue with this.$inertia.form not existing

    This seems to be an issue where the form method is not recognised, as the $inertia class is returning as type Router.

    I'm not sure this is really an issue, as I think it might just be a compiler error. I can see the inertia class is actually using form, so I suspect it does still work.

    I presume this can be resolved shim, but not entirely sure how to write that.

    ERROR in ./resources/ts/Pages/Profile/UpdatePasswordForm.vue.ts(24,34)
      TS2339: Property 'form' does not exist on type 'Router'.
    opened by PeteJStewart 19
  • Vite support

    Vite support

    Thanks a lot for the great project. I found it through this laracast thread. Laravel dropped webpack and started using Vite by default. May you please support Vite?

    opened by mbnoimi 2
Owner
Sam Parton
Sam Parton
GitHub
Multiple Authentication Using Laravel-Jetstream With Inertia-Vue

Multiple Authentication Using Laravel-Jetstream With Inertia-Vue About Jetstream-Inertia-Vue Multi-Auth It is a user-based multiple authentication sys

SK NIYAJ ALI 7 Sep 22, 2022
Proof of Concept: Load any route into a modal with Inertia.js

Inertia Vue Modal POC I've copied the default Laravel Jetstream modal component for this demo. Blog post Proof of Concept: Load any route into a modal

Protone Media 46 Oct 23, 2022
A quick template for those who wants to use Vue2 in a Laravel project along with the benefits coming from Inertia and Jetstream.

About the Template This template is an easy-to-use blank template for those who wants to develop in Laravel with InertiaJs, Vue2 and the massive capab

Furkan Meraloğlu 5 May 14, 2022
Laravel + Inertia JS + Vuetify + JetStream

Laravel 8 + InertiaJS + Jetstream + Vue + Vuetify we love Vue, Vuetify and Laravel 8 let's make them love each other. What next? After clone or downlo

Álesson de Jesus 3 Oct 17, 2022
Driving School CRM based on Laravel, Inertia (Jetstream)

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

tayfur 0 Jun 13, 2022
Pterodactyl panel build using Jetstream and Inertia with a lot of features for the customers.

Pteropanel Pterodactyl panel build using Jetstream and Inertia with a lot of features for the customers. Explore the docs » View Demo · Report Bug · R

Ismael Semmar Galvez 8 Nov 12, 2022
A basic setup for Vue.js project . vuex, vuex-persistedstate, vue-router , vue-resource , sweetalert2.

Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes

Swafia Akter 0 Jan 5, 2022
Basic vuejs project boiler-plate setup with tailwindcss, vuex, vue-router, vue-i18n...

Basic vuejs project boiler-plate setup with tailwindcss, vuex, vue-router, vue-i18n...

fotiecodes 2 Nov 3, 2022
A Frappe app to magically setup single page applications on your custom Frappe apps.

Doppio A Frappe App to setup and manage single page applications (using Vue 3) on any other custom Frappe App. Installation In your bench directory: $

Mohammad Hussain Nagaria 63 Dec 16, 2022
A magical vue3 mobile using vue3(script-setup) + vite2 + uniapp

A magical vue3 mobile using vue3(script-setup) + vite2 + uniapp

kuanghua 22 Dec 26, 2022