Vue and alias

Published 3 months ago by fdusautoir

Hi Everybody.

How can I have aliases in my vue files ? to prevent to use relative path everywhere ... That is not very convenient if I change the app structure in a future.

for example in my ./store/index.js I have in a function :

router.addRoutes([
    {
        path: '/clients',
        component: require('../../views/Clients.vue')
    }
]);
                

The best would be (as in Laravel) :

router.addRoutes([
    {
        path: '/clients',
        component: require(views_path('/Clients.vue'))
    }
]);

What is the best way to achieve that ?

Thanks for your help ! :)

Best Answer (As Selected By fdusautoir)
fdusautoir

That's okay, in my webpack.mix.js file I've added this and that's works fine :

let src_path = 'resources/assets/js/';

mix.webpackConfig({
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, src_path),
      '@store': path.resolve(__dirname, src_path + 'store/'),
      '@views': path.resolve(__dirname, src_path + 'views/'),
      '@components': path.resolve(__dirname, src_path + 'components/'),
      '@modules': path.resolve(__dirname, src_path + '/modules/'),
    }
  }
});

``
ejdelmonico
Cronix
Cronix
3 months ago (481,580 XP)

@ejdelmonico I don't think that's what they're asking.

fdusautoir

@ejdelmonico @Cronix For sure that’s not answer to my question ;). Any help ?

Cronix
Cronix
3 months ago (481,580 XP)

I think it would be better to add it to js in the master template blade view, and then access that.

<script>
    window.view_path = '{{ base_path("resources/views") }}';
</script>

and then in javascript

component: require(view_path+'/Clients.vue')
fdusautoir

Mmm I don't think that is a clean way to achieve that. I'm thinking about webpack.mix and aliases but I don't understand how it works. @JeffreyWay any videos or help about this ?

fdusautoir

That's okay, in my webpack.mix.js file I've added this and that's works fine :

let src_path = 'resources/assets/js/';

mix.webpackConfig({
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, src_path),
      '@store': path.resolve(__dirname, src_path + 'store/'),
      '@views': path.resolve(__dirname, src_path + 'views/'),
      '@components': path.resolve(__dirname, src_path + 'components/'),
      '@modules': path.resolve(__dirname, src_path + '/modules/'),
    }
  }
});

``

Please sign in or create an account to participate in this conversation.