Add an example of using Vue in the backend

[hirisov]

This is another example for using the laravel mix system. As we already have a nice example with Tailwind CSS, I think include an example for backend usage can be useful. I made the example with Vue 3, as I think that's a well known and popular framework.

[bennothommo]

@hirisov this is a great start - well done!

As a suggestion, I think a more applicable example would be to show how to use Vue for a backend controller inside a plugin. Would you be willing to adjust your example to show how to do this? Let me know if you need some help on what to say.

[hirisov]

@bennothommo thanks, you mean I should change it to include Vue in the plugin, and not the project's package json? Or you mean something else? :)

[bennothommo]

@hirisov yeah, mainly just making sure that the entire tutorial manipulates files within the plugin, not in the root folder. Also, typically, we store asset files like JS and CSS within an assets directory within the plugin, so I would suggest perhaps where you have src/..., it should perhaps be assets/src/... or even separate by the type of file, such as assets/js/src/....

[hirisov]

@bennothommo thanks, I updated it to move the src/ into assets/ and update the Table of contents part to include links to the examples. But I couldn't find a working way to define Vue 3 as a dependency in the plugin's package.json. If anybody can help me with that, I am glad to update it and use that method instead of the "npm install" way.

[bennothommo]

@hirisov I generally just edit the package.json file directly in the plugin or theme and define the dependencies, ie.

    "dependencies": {
        "vue": "^3.2.41"
    }

And then run php artisan mix:install -p <my theme or plugin> to install the dependencies as part of the plugin or theme.

[hirisov]

@bennothommo thanks, I did the same but also defined vue-loader in package.json as dependency. That lead to an error during compiltion, but If I include only vue there as you suggested then all is good. I updated the PR with this.

[bennothommo]

@hirisov the php artisan mix:install command is supposed to check if the given plugin or theme is registered as a "workspace" in the root package.json file. Workspaces in Node/NPM basically are linked dependencies that are used to determine the packages needed across the entire project. If the plugin or theme isn't registered as a workspace, it prompts you to add it as one when you run the command.

What sort of error did you get originally that didn't allow you to add Vue as a dependency in the plugin? We might need to check it out.

[hirisov]

@bennothommo the error on was my side, I included a mismatching version of the vue-loader alongside vue as devDependencies. If I include a matching version on vue-loader in the plugin's package.json, or don't include it at all just vue, in which case mix:compile will notice vue-loader is a missing dependency and will install it (and will update the plugin's package.json with the correct version) then all is good.

However I tried to improve the example to include another vue related package as an example to show how to work with other dependencies in plugin's package.json then I again ran into strange problems during mix:compile. I give details about in in a next comment to keep it clean.

[hirisov]

@bennothommo so this is what happened in the next phase when I tried to include another vue package:

1, I choose https://antoniandre.github.io/splitpanes/ as a test as It supports vue3
2, I did npm install splitpanes to install it. The package.json in my plugin's directory got updated with the new dependency: "splitpanes": "^3.1.5"
3, I modified asset/src/js/component/Welcome.vue according to https://antoniandre.github.io/splitpanes/#how-to-use to include some panels. Worked well.
4, now I backed up my plugin directory, with the updated package.json and asset/src/js/component/Welcome.vue to a separate place in my $HOME
5, I deleted the whole website and database. Made a fresh one with composer create-project wintercms/winter wn-test-website "dev-develop" to test if it installs correctly from "zero". I set up .env file, copy back the plugin to plugins/h3kft/vue, and do migrations, all runs well.
6, I use php artisan mix:install -p h3kft.vue to install the dependencies, still all good.
7, Now I do php artisan mix:compile and get an error:

hirisov@hirisov-ThinkPad-T14:~/www/pcd/wn-test-website$ php artisan mix:compile
Mixing package "h3kft.vue"

✖ Mix
  Compiled with some errors in 890.48ms

LOG from webpack.FileSystemInfo
<w> /home/hirisov/www/pcd/wn-test-website/node_modules/vue/package.json doesn't contain a "name" property (see snapshot.managedPaths option)
+ 12 hidden lines

ERROR in ../../../node_modules/splitpanes/dist/splitpanes.es.js 1:0-108
Module not found: Error: Can't resolve 'vue' in '/home/hirisov/www/pcd/wn-test-website/node_modules/splitpanes/dist'

webpack compiled with 1 error
   ERROR  Unable to compile package "h3kft.vue".  

So basically when I "originally" did npm install splitpanes it worked well, but when trying to do it from "zero" based on the package.json generated "originally" with the npm install splitpanes then it did not.

If you want I can share the plugin code test. Maybe during development of the plugin "npm install" in the plugin directory isn't the correct way to add other node dependencies?

[hirisov]

Just as I sidenote, now it doesn't matter if I use php artisan mix:install -p h3kft.vue or php artisan mix:install, the php artisan mix:compile will always fail with the above error.

[hirisov]

@bennothommo I can make a PR to the wn-test-plugin to demonstrate this if you like, maybe it wouldn't be bad anyway to have a Vue (or in general package.json) example there?

[hirisov]

@bennothommo I made a PR for the test plugin to include the "base", working Vue with no other dependencies: https://github.com/wintercms/wn-test-plugin/pull/13/commits . Please let me know if you want to merge it, and then I will make another one demonstrating this issue with the other dependencies. If you don't think it should be merged then I will just make a new commit to that https://github.com/hirisov/wn-test-plugin to include the splitpanes to make it easier to test the problem.

[hirisov]

thanks for the feedback!

[bennothommo]

Thanks for this, @hirisov. I've cleaned up the docs a little and merged it.

As for the problem that you encountered - I'm not sure TBH. My workflow tends to be:

• Adding dependencies in a package.json inside a plugin or theme.
• Running php artisan mix:install and adding the plugin/theme as a workspace if prompted.
• Never using npm directly - I find that npm has its own set of rules that does not play nice with our theme/plugin architecture, mainly in that it will add dependencies into the root project's package.json file if it exists (which it should if you've used php artisan mix:install previously).
• Running php artisan mix:compile -p <my theme or plugin> whenever I need to compile.

For what it's worth, my root package.json tends to be rather small:

{
    "devDependencies": {
        "laravel-mix": "^6.0.41"
    },
    "workspaces": {
        "packages": [
            "modules/backend",
            "modules/system"
        ]
    }
}

You'll notice that there's no dependencies in there (bar Laravel Mix), and everything is instead coming from the Backend and System modules. If I have a plugin or theme using Mix on that project, they will also be part of workspaces.

[hirisov]

@bennothommo thanks a lot for your clean up and the merge!

Regarding the other problem, please let me know if I should proceed with the wintercms/wn-test-plugin#13 . If yes I will update the code there to follow these instructions that we finalized here, and after merging there I can make a new PR to demonstrate the problem.

As I wrote after the backing up my test plugin and copying back to a fresh install there was no npm involved at all, just the package.json cointaining 2 lines (vue and splitpanes) and I did exactly what you wrote with mix:install and mix:comple and that is when it didn't work. My root package.json is also exactly the same as yours, the test plugin is added there as workspace, no other package:

{
    "devDependencies": {
        "laravel-mix": "^6.0.41"
    },
    "workspaces": {
        "packages": [
            "modules/backend",
            "modules/system",
            "plugins/winter/test"
        ],
        "ignoredPackages": []
    }
}

[bennothommo]

No worries - I'll give that a test and report back :)