https://github.com/williamyorkl/vite-plugin-vue2-suffix
A plugin solve missing '*.vue' suffix problem transform webpack to vite in vue2
https://github.com/williamyorkl/vite-plugin-vue2-suffix
Last synced: about 1 month ago
JSON representation
A plugin solve missing '*.vue' suffix problem transform webpack to vite in vue2
- Host: GitHub
- URL: https://github.com/williamyorkl/vite-plugin-vue2-suffix
- Owner: williamyorkl
- License: mit
- Created: 2021-08-18T01:48:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-08T02:56:53.000Z (over 3 years ago)
- Last Synced: 2024-07-31T22:38:52.374Z (9 months ago)
- Language: JavaScript
- Size: 32.2 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v2 - Compatible without '.vue' suffix. (Plugins / Vue)
- awesome-vite - v2 - Compatible without '.vue' suffix. (Plugins / Vue)
README
# vite-plugin-vue2-suffix
> it has been official inclued [detail](https://github.com/vitejs/awesome-vite#helpers-1)
### A plugin solve missing '\*.vue' suffix problem transform webpack to vite in vue2
## Usage
Install
```bash
npm i vite-plugin-vue2-suffix -D
```
Add it to `vite.config.js`
```js
// vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import VitePluginVue2Suffix from "vite-plugin-vue2-suffix";
export default {
plugins: [createVuePlugin(), VitePluginVue2Suffix()],
};
```
That's all.
### Situation 1
> components using in another components
it will automatically turn this
```vue
import ComponentA from "./components/ComponentA";
export default {
components: {
ComponentA,
},
};
```
into this
```vue
import ComponentA from "./components/ComponentA/index.vue";
/** or if your component is in a outside path */
// import ComponentA from './components/ComponentA.vue'
export default {
components: {
ComponentA,
},
};
```
### Situation 2
> components using in routes
also, it will turn this:
```js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const routerMap = [
{
path: "/news",
component: () => import("../components/News"),
},
];
export default new Router({
scrollBehavior: () => ({
y: 0,
x: 0,
}),
routes: routerMap,
});
```
into this below:
```js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const routerMap = [
{
path: "/news",
component: () => import("../components/News.vue"),
/** or if your component is in a inside path */
// component: () => import('../components/News/index.vue')
},
];
export default new Router({
scrollBehavior: () => ({
y: 0,
x: 0,
}),
routes: routerMap,
});
```
## License
MIT License © 2021 [williamyorkl](https://github.com/williamyorkl)