feat: auto install Pinia module on first store creation

src/commands/CSS.ts

@@ -76,7 +76,7 @@ const configureTailwind = () => {
  successMessage: 'TailwindCSS Module installed successfully',
  errorMessage: 'TailwindCSS Module installation failed',
  })
- await addNuxtModule({ npm: moduleName })
+ await addNuxtModule(moduleName)
  }
 
  if (selections.includes(TailwindOptions.createTailwindCSSFile)) {
@@ -136,7 +136,7 @@ const configureWindi = async () => {
  errorMessage: 'WindiCSS installation failed',
  })
 
- await addNuxtModule({ npm: moduleName })
+ await addNuxtModule(moduleName)
  }
 
  if (selections.includes(WindiOptions.createConfigFile)) {
@@ -184,7 +184,7 @@ const configureUno = async () => {
  errorMessage: 'UnoCSS installation failed',
  })
 
- await addNuxtModule({ npm: moduleName })
+ await addNuxtModule(moduleName)
  }
 
  if (selections.includes(UnoCSSOptions.createConfigFile)) {
@@ -232,7 +232,7 @@ const configureVuetify = async () => {
  errorMessage: 'Vuetify installation failed',
  })
 
- await addNuxtModule({ npm: moduleName })
+ await addNuxtModule(moduleName)
  }
 
  if (selections.includes(VuetifyOptions.createConfigFile)) {

src/commands/Store.ts

@@ -1,7 +1,41 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, isNuxtTwo, createFile, generatePiniaTemplates, normalizeFileExtension } from '../utils'
+import {
+ projectSrcDirectory,
+ isNuxtTwo,
+ createFile,
+ generatePiniaTemplates,
+ normalizeFileExtension,
+ isModuleConfigured,
+ getInstallationCommand,
+ runCommand,
+ addNuxtModule,
+ isDependencyInstalled
+} from '../utils'
 import { vuexContent } from '../templates'
 
+async function detectPiniaModule() {
+ const moduleName = '@pinia/nuxt'
+ const isConfigured = await isModuleConfigured(moduleName)
+ const installationCommand = await getInstallationCommand(moduleName, true)
+ const isInstalled = await isDependencyInstalled(moduleName)
+
+
+ if (!isInstalled ) {
+ await runCommand({
+ command: installationCommand,
+ message: 'Installing @pinia/nuxt module',
+ successMessage: 'Pinia module installed successfully',
+ errorMessage: 'Pinia module installation failed',
+ docsURL: 'https://pinia.vuejs.org/'
+ })
+ }
+
+ if (!isConfigured) {
+ await addNuxtModule(moduleName)
+ }
+
+}
+
 const createStore = () => {
  window
  .showInputBox({
@@ -25,6 +59,8 @@ const createStore = () => {
  fullPath: filePath,
  })
  }
+
+ await detectPiniaModule()
  })
 }
 
@@ -53,6 +89,7 @@ const directCreateStore = (path: string) => {
  })
  }
 
+ await detectPiniaModule()
  })
 }
 

src/templates/stores.ts

@@ -1,19 +1,15 @@
 import { normalizeName } from '../utils'
 
 const piniaOptionsContent = (name: string): string => {
- return `import { defineStore } from 'pinia'
-
-export const useMy${normalizeName(name)}Store = defineStore({
+ return `export const useMy${normalizeName(name)}Store = defineStore({
  id: 'my${normalizeName(name)}Store',
  state: () => ({ }),
  actions: {}
 })
 `}
 
 const piniaSetupContent = (name: string): string => {
- return `import { defineStore } from 'pinia'
-
-export const use${normalizeName(name)}Store = defineStore('${normalizeName(name)}', () => {
+ return `export const use${normalizeName(name)}Store = defineStore('${normalizeName(name)}', () => {
  return {}
 })
 `}

src/utils/dependency.ts

@@ -488,4 +488,9 @@ export async function removePackage(packageName: string): Promise<void> {
  })
  }
  )
+}
+
+export async function isDependencyInstalled(packageName: string): Promise<boolean> {
+ const dependencies = await getProjectDependencies()
+ return dependencies.some((dependency) => dependency.name === packageName)
 }

src/utils/global.ts

@@ -78,6 +78,7 @@ export const runCommand = async (args: {
  message: string
  successMessage: string
  errorMessage: string
+ docsURL?: string
  // logger boolean default false
  logger?: boolean
 }) => {
@@ -107,7 +108,15 @@ export const runCommand = async (args: {
 
  child.on('exit', async (code) => {
  if (code === 0) {
- window.showInformationMessage(args.successMessage);
+ if (!args.docsURL) {
+ window.showInformationMessage(args.successMessage);
+ } else {
+ const response = await window.showInformationMessage(args.successMessage, 'Open documentation');
+ if (response === 'Open documentation') {
+ openExternalLink(args.docsURL);
+ }
+ }
+
  } else {
  window.showErrorMessage(args.errorMessage);
  }

src/utils/index.ts

@@ -19,6 +19,7 @@ import {
  hasServerDir,
  findNuxtConfig,
  isNuxtProject,
+ isModuleConfigured
 } from './nuxt'
 
 import {
@@ -28,7 +29,8 @@ import {
  getInstallationCommand,
  getOutdatedPackages,
  dependenciesUpdatesHandler,
- updateDependencies
+ updateDependencies,
+ isDependencyInstalled
 } from './dependency'
 
 import { createFile, createSubFolders, showSubFolderQuickPick, createDir, createVueTemplate, normalizeName, normalizeFileExtension } from './file'
@@ -87,4 +89,6 @@ export {
  normalizeFileExtension,
  openFolder,
  quickOpenButtons,
+ isModuleConfigured,
+ isDependencyInstalled
 }

src/utils/nuxt.ts

@@ -1,4 +1,4 @@
-import { window, workspace, Uri } from 'vscode';
+import { window } from 'vscode';
 import { writeFileSync, readFileSync, existsSync, promises, readdir } from 'fs';
 import { join } from 'pathe';
 import { parseModule } from 'magicast';
@@ -28,7 +28,30 @@ const isLayer = async (module: any) => {
 };
 
 
-export const addNuxtModule = async (module: any) => {
+export const isModuleConfigured = async (module: string) => {
+ const nuxtConfigPath = findNuxtConfig();
+ const nuxtConfig = readFileSync(`${nuxtConfigPath}`, 'utf-8');
+
+ const mod = parseModule(nuxtConfig, { sourceFileName: nuxtConfigPath });
+
+ const config =
+ mod.exports.default.$type === 'function-call'
+ ? mod.exports.default.$args[0]
+ : mod.exports.default;
+
+ let layer = await isLayer(module);
+
+ if (layer) {
+ config.extends ||= [];
+ return config.extends.includes(module);
+ } else {
+ config.modules ||= [];
+ return config.modules.includes(module);
+ }
+}
+
+
+export const addNuxtModule = async (module: string) => {
  try {
  const nuxtConfigPath = findNuxtConfig();
  const nuxtConfig = readFileSync(`${nuxtConfigPath}`, 'utf-8');
@@ -43,21 +66,21 @@ export const addNuxtModule = async (module: any) => {
 
  if (layer) {
  config.extends ||= [];
- if (!config.extends.includes(module.npm)) {
- config.extends.push(module.npm);
+ if (!config.extends.includes(module)) {
+ config.extends.push(module);
  }
  } else {
  config.modules ||= [];
- if (!config.modules.includes(module.npm)) {
- config.modules.push(module.npm);
+ if (!config.modules.includes(module)) {
+ config.modules.push(module);
  }
  }
 
  const generated = mod.generate().code;
  writeFileSync(`${nuxtConfigPath}`, `${trimEnd(generated)}\n`, 'utf-8');
  } catch (error) {
  window.showErrorMessage(
- `${module.npm} failed to install, please install it manually, ${error}`
+ `${module} failed to install, please install it manually, ${error}`
  );
  }
 };