Skip to content

Commit 2da92f4

Browse files
hkp22hkp22
committed
Add Vue 3 preset
1 parent aa6869c commit 2da92f4

12 files changed

+172
-17
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This Laravel package adds multi-theme support to your application. It also provi
1414
- Fallback theme support (Wordpress style); It allows creating a child theme to extend any theme
1515
- Provides a authentication scaffolding similar to `laravel/ui` & `laravel/breeze`
1616
- Exports all auth controllers, tests, and other files similar to `laravel/breeze`
17-
- Provides frontend presets for `bootstrap`, `tailwind`, `vue`, and `react`
17+
- Provides frontend presets for `Bootstrap`, `Tailwind`, `Vue 2`, `Vue 3` and `React`
1818

1919
## Installation and setup
2020

‎src/Commands/MakeThemeCommand.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@ protected function askJsFramework()
112112
{
113113
$jsFramework = $this->choice(
114114
'Select Javascript Framework',
115-
['Vue', 'React', 'Skip'],
116-
$default = 'Vue',
115+
['Vue 2', 'Vue 3', 'React', 'Skip'],
116+
$default = 'Vue 2',
117117
$maxAttempts = null,
118118
$allowMultipleSelections = false
119119
);

‎src/Presets/BootstrapPreset.php

+5-5
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ public function export(): void
2424
protected static function updatePackageArray(array $packages): array
2525
{
2626
return [
27-
'bootstrap' => '^4.0.0',
28-
'jquery' => '^3.2',
29-
'popper.js' => '^1.12',
30-
'sass' => '^1.15.2',
31-
'sass-loader' => '^8.0.0',
27+
'bootstrap' => '^4.6.0',
28+
'jquery' => '^3.5',
29+
'popper.js' => '^1.16',
30+
'sass' => '^1.32.1',
31+
'sass-loader' => '^10.1.1',
3232
] + $packages;
3333
}
3434

‎src/Presets/PresetExport.php

+2
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ public function export(): void
5353

5454
public function getPreset($preset)
5555
{
56+
$preset = str_replace(' ', '', $preset);
57+
5658
$presetClass = "\\Qirolab\\Theme\\Presets\\{$preset}Preset";
5759

5860
if (class_exists($presetClass)) {

‎src/Presets/VuePreset.php renamed to ‎src/Presets/Vue2Preset.php

+9-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
use Qirolab\Theme\Presets\Traits\PresetTrait;
66

7-
class VuePreset
7+
class Vue2Preset
88
{
99
use PresetTrait;
1010

@@ -24,11 +24,11 @@ public function export(): void
2424
protected static function updatePackageArray(array $packages): array
2525
{
2626
return [
27-
'resolve-url-loader' => '^2.3.1',
28-
'sass' => '^1.20.1',
29-
'sass-loader' => '^8.0.0',
30-
'vue' => '^2.5.17',
31-
'vue-template-compiler' => '^2.6.10',
27+
'resolve-url-loader' => '^3.1.2',
28+
'sass' => '^1.32.1',
29+
'sass-loader' => '^10.1.1',
30+
'vue' => '^2.6.12',
31+
'vue-template-compiler' => '^2.6.12',
3232
] + $packages;
3333

3434
// return [
@@ -51,7 +51,7 @@ protected static function updatePackageArray(array $packages): array
5151
*/
5252
protected function exportJs()
5353
{
54-
copy(__DIR__ . '/../../stubs/Presets/vue-stubs/app.js', $this->themePath('js/app.js'));
54+
copy(__DIR__ . '/../../stubs/Presets/vue2-stubs/app.js', $this->themePath('js/app.js'));
5555

5656
if ($mixVersion = $this->getMixVersion()) {
5757
if (version_compare($mixVersion, '6.0.0', '<')) {
@@ -64,7 +64,7 @@ protected function exportJs()
6464
}
6565

6666
if (! $this->exists($this->themePath('js/bootstrap.js'))) {
67-
copy(__DIR__ . '/../../stubs/Presets/vue-stubs/bootstrap.js', $this->themePath('js/bootstrap.js'));
67+
copy(__DIR__ . '/../../stubs/Presets/vue2-stubs/bootstrap.js', $this->themePath('js/bootstrap.js'));
6868
}
6969

7070
return $this;
@@ -80,7 +80,7 @@ protected function exportVueComponent()
8080
$this->ensureDirectoryExists($this->themePath('js/components'));
8181

8282
copy(
83-
__DIR__ . '/../../stubs/Presets/vue-stubs/ExampleComponent.vue',
83+
__DIR__ . '/../../stubs/Presets/vue2-stubs/ExampleComponent.vue',
8484
$this->themePath('js/components/ExampleComponent.vue')
8585
);
8686

‎src/Presets/Vue3Preset.php

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<?php
2+
3+
namespace Qirolab\Theme\Presets;
4+
5+
use Qirolab\Theme\Presets\Traits\PresetTrait;
6+
7+
class Vue3Preset
8+
{
9+
use PresetTrait;
10+
11+
public function export(): void
12+
{
13+
$this->updatePackages()
14+
->exportVueComponent()
15+
->exportJs();
16+
}
17+
18+
/**
19+
* Update the given package array.
20+
*
21+
* @param array $packages
22+
* @return array
23+
*/
24+
protected static function updatePackageArray(array $packages): array
25+
{
26+
return [
27+
'@vue/compiler-sfc' => '^3.0.5',
28+
'resolve-url-loader' => '^3.1.2',
29+
'sass' => '^1.32.1',
30+
'sass-loader' => '^10.1.1',
31+
'vue' => '^3.0.5',
32+
'vue-loader' => '^16.1.2',
33+
] + $packages;
34+
35+
// return [
36+
// 'resolve-url-loader' => '^2.3.1',
37+
// 'sass' => '^1.20.1',
38+
// 'sass-loader' => '^8.0.0',
39+
// 'vue' => '^2.5.17',
40+
// 'vue-template-compiler' => '^2.6.10',
41+
// ] + Arr::except($packages, [
42+
// '@babel/preset-react',
43+
// 'react',
44+
// 'react-dom',
45+
// ]);
46+
}
47+
48+
/**
49+
* Update the bootstrapping files.
50+
*
51+
* @return $this
52+
*/
53+
protected function exportJs()
54+
{
55+
copy(__DIR__ . '/../../stubs/Presets/vue3-stubs/app.js', $this->themePath('js/app.js'));
56+
57+
if (! $this->exists($this->themePath('js/bootstrap.js'))) {
58+
copy(__DIR__ . '/../../stubs/Presets/vue3-stubs/bootstrap.js', $this->themePath('js/bootstrap.js'));
59+
}
60+
61+
return $this;
62+
}
63+
64+
/**
65+
* Update the example component.
66+
*
67+
* @return $this
68+
*/
69+
protected function exportVueComponent()
70+
{
71+
$this->ensureDirectoryExists($this->themePath('js/components'));
72+
73+
copy(
74+
__DIR__ . '/../../stubs/Presets/vue3-stubs/ExampleComponent.vue',
75+
$this->themePath('js/components/ExampleComponent.vue')
76+
);
77+
78+
return $this;
79+
}
80+
81+
/**
82+
* @return null|string
83+
*/
84+
public function webpackJs()
85+
{
86+
$jsMix = '.js(`${__dirname}/js/app.js`, "js")';
87+
$jsMix .= "\n .vue()";
88+
89+
return $jsMix;
90+
}
91+
}

‎stubs/Presets/vue-stubs/ExampleComponent.vue renamed to ‎stubs/Presets/vue2-stubs/ExampleComponent.vue

File renamed without changes.

‎stubs/Presets/vue-stubs/app.js renamed to ‎stubs/Presets/vue2-stubs/app.js

File renamed without changes.

‎stubs/Presets/vue-stubs/bootstrap.js renamed to ‎stubs/Presets/vue2-stubs/bootstrap.js

File renamed without changes.

‎stubs/Presets/vue3-stubs/ExampleComponent.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="container">
3+
<div class="row justify-content-center">
4+
<div class="col-md-8">
5+
<div class="card">
6+
<div class="card-header">Example Component</div>
7+
8+
<div class="card-body">
9+
I'm an example component.
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
mounted() {
20+
console.log('Component mounted.')
21+
}
22+
}
23+
</script>

‎stubs/Presets/vue3-stubs/app.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* First we will load all of this project's JavaScript dependencies which
3+
* includes Vue and other libraries. It is a great starting point when
4+
* building robust, powerful web applications using Vue and Laravel.
5+
*/
6+
7+
require("./bootstrap");
8+
9+
/**
10+
* We will create a fresh Vue application instance.
11+
*/
12+
import { createApp } from "vue";
13+
14+
const app = createApp({});
15+
16+
/**
17+
* The following block of code may be used to automatically register your
18+
* Vue components. It will recursively scan this directory for the Vue
19+
* components and automatically register them with their "basename".
20+
*
21+
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
22+
*/
23+
24+
// const files = require.context('./', true, /\.vue$/i)
25+
// files.keys().map(key => app.component(key.split('/').pop().split('.')[0], files(key).default))
26+
27+
app.component(
28+
"example-component",
29+
require("./components/ExampleComponent.vue").default
30+
);
31+
32+
/**
33+
* Next, attach Vue application instance to the page. Then, you may begin adding components to this application
34+
* or customize the JavaScript scaffolding to fit your unique needs.
35+
*/
36+
app.mount("#app");

‎stubs/Presets/vue3-stubs/bootstrap.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* JavaScript dependencies libraries.
3+
*/

0 commit comments

Comments
 (0)