DEV Community: Tuan Duong

How to configure PHPStorm to work with Vite - Aliases

Tuan Duong — Mon, 04 Nov 2024 04:04:00 +0000

If you have trouble using "Declaration or Usages" hotkey to navigate to files importing from aliases while working with JS (or Vue) files, example:

<script setup>
import SomeComponent from '@/views/components/SomeComponent.vue'
...
</script>

To resolve this, create a configuration file named phpstorm.config.js in your project's root directory with the following content:

System.config({
  "paths": {
    "@/*": "./resources/js/*",
  }
});

Ensure that the paths configuration aligns with the alias definitions in your vite.config.js. For instance:

  resolve: {
      '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
  ...
  }

By adding the phpstorm.config.js file with the appropriate path mappings, PhpStorm will recognize the aliases, enabling seamless navigation using the "Declaration or Usages" hotkey.

Laravue core - a Laravel package to build a beautiful dashboard

Tuan Duong — Thu, 21 Mar 2019 15:54:38 +0000

Laravue core

Introduction

Last month, I introduced our Laravue project which is to build an administrative interface for Laravel using VueJS in this post, the development progress is quite good and we have some beta releases last weeks. However, Laravue is positioned as an enterprise dashboard solution which is not suitable to use for existing projects. Today I would like to introduce Laravue core - a Laravel package which provides all core functionalities for Laravue and easy to integrate to any Laravel projects.

Screenshot

Demo: https://core.laravue.dev
Source code: https://github.com/tuandm/laravue-core

Getting started

Laravue-core provides a useful command that will set up everything, just get the tuandm/laravue-core package with composer, type php artisan laravue:setup then continue with the prompt - very easy.

Please refer to the installation guide for more detail

Next steps

We will try to release new version for Lumen - it is very attractive.
Tests system is under development - we want to cover this library as much as possible
Documentation will be released shortly - including components manual and development guidelines.
We will add useful Laravel packages such as spatie/laravel-permission or CRUD support.

I hope this package will help you in building a beautiful admin UI for your Laravel projects. I greatly appreciate any feedback, comments, suggestions and even stars,... they absolutely make me and this library better. Thank you.

How to test Vue components with Laravel Mix and Mocha

Tuan Duong — Wed, 06 Mar 2019 15:33:56 +0000

Introduction

While adding tests to Laravue, I found that setting unit tests for Vue with Laravel Mix is not simple like Vue's official document. After working around with some google-ing, I've passed the setup steps and just want to share what I've done so far.

Setup Laravel and npm dependencies

Firstly, we create new Laravel project with the command which every Laravel developer shoud know:

composer create-project --prefer-dist laravel/laravel test
cd test
npm install

Very easy!

Then we have to setup tests environment as well as required libraries/dependencies. I picked Mocha + Webpack because many articles mentioned this.

npm install --save-dev webpack vue-template-compiler @vue/test-utils mocha mocha-webpack jsdom jsdom-global expect

Ok, seems everything is set, let us double check with npm list --depth=0

Wow, something is wrong!

➜  test npm list --depth=0
...
├── UNMET PEER DEPENDENCY mocha@6.0.2
...
└── UNMET PEER DEPENDENCY webpack@4.29.6

npm ERR! peer dep missing: mocha@>=2.4.5 <=5, required by mocha-webpack@1.1.0
npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0, required by mocha-webpack@1.1.0
npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0, required by mocha-webpack@1.1.0

It says that dependencies' versions are not matched. Seems mocha-webpack is not up-to-date with webpack and mocha, it requires old versions (mocha 2.4.5-5 and webpack 2 or 3 while latest versions are mocha@6 and webpack@2.49.6). Now let's go to the mocha-webpack repo to see what happens. Indeed, there is no update since last year. Ok, what to do next? We may want to check the issue list to see any similar cases and solutions. Luckily, the first issue is the one we are finding:

Hi there, mocha-webpack users!

mocha-webpack has no activity since May, 2018. We at SysGears are maintaining a fork here:
https://github.com/sysgears/mochapack

A new version of mochapack@1.1.0 has been released today with Mocha 6 support.

Check it out!

Now we go to Mochapack as the author recommended, we can see the installation guide for Mochapack:

npm install --save-dev mochapack

Seems it works. Ok, let's remove the outdated mocha-webpack:

npm remove mocha-webpack

Wow, npm list --depth=0 returns very clean result. Don't forget to give the mochapack a star for this awesome work.

Setup test enviroment

Now we are ready to create test cases for our Vue components following this guide. To start it, we have to prepare a environment for tests by creating new folder inside /tests/.

mkdir tests/js

Then create file setup.js inside folder tests/js and put this line on top:

require('jsdom-global')();

Next step will be the npm command to run tests, we have to open package.json and add this line inside scripts section

        "test": "mochapack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/js/setup.js tests/js/\\*\\*/\\*.spec.js"

You can pick any name for tests/js folder and setup.js file, don't forget to indicate them in the test command

Now is the show time:

➜ npm test

 WEBPACK  Compiled successfully in 140ms

 MOCHA  Testing...



  0 passing (0ms)

 MOCHA  Tests completed successfully

Wow, it works with 0 test passing - because we haven't added yet. We are going to do it now.

Writing a test

To save time, we can use resources/js/components/ExampleComponent.vue of Laravel to write test. If you take a look to this component, you will see it just shows the Example Component header. Now we create a test file tests/js/components/ExampleComponent.spec.js and put these lines to that file

// tests/js/components/ExampleComponent.spec.js
import { mount } from '@vue/test-utils';
import expect from 'expect';
import ExampleComponent from '../../../resources/js/components/ExampleComponent.vue';

describe('ExampleComponent.vue', () => {
  it('says that it is an example component', () => {
    const wrapper = mount(ExampleComponent);
    expect(wrapper.html()).toContain('Example Component');
  });
});

This test case is to check after ExampleComponent mounted, Example Component should be in the output html.

Save the file and run the test command again:

➜ npm test
 WEBPACK  Failed to compile with 1 error(s)

Error in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e&

  Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
  TypeError: Super expression must either be null or a function
      at /.../test/node_modules/prettier/index.js:40358:5
      at /.../test/node_modules/prettier/index.js:40378:4

npm ERR! Test failed.  See above for more details.

Ok, we've got the error. You will be crazy to find out the answer for this error from internet. Don't worry, just do this fix: Open tests/js/setup.js again and put this line next to the first one:

window.Date = Date;

Save setup.js file and run test command again

➜ npm test

 WEBPACK  Compiled successfully in 1436ms

 MOCHA  Testing...



  ExampleComponent.vue
Component mounted.
    ✓ says that it is an example component


  1 passing (22ms)

 MOCHA  Tests completed successfully

Yeah, it works, test case passed. Now we can put more Vue components and tests them.

Please enjoy testing! You can find my sample here: https://github.com/tuandm/laravel-vue-tests-with-mocha

Noted: I'm using MacOS Mojave 10.14.2, all related tools (npm, composer...) are considered as last versions.

Laravue - a beautiful dashboard for Laravel

Tuan Duong — Thu, 14 Feb 2019 05:43:39 +0000

Introductions

Couple months ago I was trying to find a new solution for my project, and I had built a SPA dashboard with Vue (using this great framework, Laravel Lumen as API gateway, Laravel Passport as SSO server). After some weeks of working, I found that architecture has some limitations, especially in deployment and hard to open source (because many components involved, CORS setup,...). Then one day new idea came to me:

Why don't we use builtin VueJS of Laravel to build a SPA dashboard?

And Laravel + VueJS = Laravue

Demo: https://laravue.dev
Documentation: https://doc.laravue.dev

Laravue is a beautiful dashboard inspired by vue-element-admin but beyond that. It provides all necessary components for building an enterprise application for admin to control business and manage others. My plan is to apply newest technologies/libraries/components of Laravel/Vue to this project and make it easy to use for everyone. In the demo, API will be served by Laravel itself and most of them are faked - but easy to implement.

Getting started

# Clone the project with composer
composer create-project tuandm/laravue
cd laravue

# Migration and DB seeder (after changing your DB settings in .env)
php artisan migrate --seed

# Install passport
php artisan passport:install

# install dependency
npm install

# Build for development
npm run dev # or npm run watch

# Start local development server
npm artisan serve

Next steps

This project is on heavy development and it has not being built as Laravel plugin (as it should be). Next step will be a standalone plugin for Laravel to easy to integrate to existing Laravel websites.
Provide full documentation and strict coding convention. PHP/Laravel has an excellent PSR and VueJS has a good standard here but it's too basic and not enough.
Fully tests.

I greatly appreciate any feedback, comments, suggestions,... they absolutely make me and this library better. Thank you.

Also, this is my first DEV post 🎉