How to install Vue in Wave V2

bigbenbeer

May 31, 04:39 PM

I am busy building an app using Wave V2 as my base, however I would like to add Vue. How can I do this in Wave v2?

Long explanation

I tried going the traditional laravel route by

composer require laravel/ui
php artisan ui vue

However this causes a problem with npm. The first time npm runs it will give a vulnerability warning on object-path. Then running npm audit fix will result in a new vulnerability warning for postcss. Running npm audit fix again results in the original error. These two errors then cycle back and forth without ever resolving. I have spent hours trying to resolve this, does anybody have any advice for me?

Edit: Is there a better way to create a dynamic app within Wave-v2? Before Wave I was building my own SAAS apps with Laravel 7 + Bootstrap 4 + Vue2. I took a break from Laravel during COVID and by the time I came back Laravel 8 was released and my skills were horribly outdated.

Select One:
bobbyiliev

June 1, 11:42 PM

Hi there,

The Laravel UI package is already shipped with Wave, so you don't have to run the composer require laravel/ui command. You can check this with the following command:

php artisan  | grep ui:

What you could do is manually install Vue with npm. You could follow the steps on how to do that without the UI package here.

Alternatively I could suggest checking out Laravel Livewire, it is pretty cool and easy to get started with.

I would recommend taking a look at this playlist on YouTube that shows how to build a SaaS from scratch with Livewire and Wave:

Build a SaaS for 30 minutes per day with Laravel Wave

Hope that this helps!

Bobby

Select One:
Write
Preview
Help

Markdown Basics

DevDojo uses Markdown syntax for writing posts, commments, and other content throughout the site. Below you will find some commonly used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet


Bold & Italic

Italics *asterisks*

Bold **double asterisks**


Code

Inline Code `backtick`

Code Block

```
Three back ticks and then enter your code blocks here.
```

Headers

# This is Heading 1
## This is Heading 2
### This is Heading 3
#### This is Heading 4
##### This is Heading 5

Here is an example of how each heading will looks

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5

Quotes

> type a greater than sign and start typing your quote.

Links

You can add links by typing the alt text inside of [] and the link inside of (), like so:

[links](https://devdojo.com)

Images

You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the link inside of (), like so:

![alt text for image](https://cdn.devdojo.com/images/image.png)

Embedding Codepens

You can also embed a codepen pen by writing the following:

{% codepen https://codepen.io/your/pen/url %}

You may also choose the default tabs you wish to show your pen by writing the default-tab like so: (default is result)

{% codepen https://codepen.io/your/pen/url default-tab=result,html %}


Embedding YouTube Videos

You can also embed a YouTube video by writing the following:

{% youtube VIDEO_ID_HERE %}


Embedding Katacoda Terminal

You can also embed a Katacoda Terminal by writing the following:

{% katacoda %}

You may also choose if the terminal should float at the bottom of the page or be embeded in the post itself by writing float like so:

{% katacoda float %}


Embedding Asciinema

You can also embed an Asciinema video by writing the following:

{% asciinema YOUR_VIDEO_ID %}

You may also choose if the video should be added as an alternate rel tag, so it could later on be played with the `asciinema play https://devdojo/post-name` command, with the rel argument like so:

{% asciinema YOUR_VIDEO_ID rel %}


Embedding Gists

You can also embed a Gists by writing the following:

{% gist GIST_ID_HERE %}


Embedding buymeacoffee.com

You can also embed your "Buy me a coffee" button by writing the following:

{% buymeacoffee BUY_ME_A_COFFEE_USERNAME_HERE %}


Embedding CodeSandbox

You can also embed CodeSandbox by writing the following:

{% codesandbox YOUR_CODESANDBOX_EMBED_URL %}

Example:

{% codesandbox https://codesandbox.io/embed/rough-field-mykn0?fontsize=14&hidenavigation=1&theme=dark %}


That's about it. It's time to start crafting your story.

Please login, or signup to write a response.