How to use Pinia in *.js env. without VUE Cli ? #2280

freatraum · 2023-06-27T02:10:53Z

freatraum
Jun 27, 2023

I want to use Pinia in .js with out VUE Cli.
This is my files:
index.html
index.js
index.vue

roma-marshall · 2023-06-27T13:41:55Z

roma-marshall
Jun 27, 2023

To use Pinia in a JavaScript project without Vue CLI, you can follow these steps:

Create a new directory for your project.
Inside the project directory, create the following files:

index.html
index.js
index.vue

Open index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pinia Example</title>
</head>
<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>
</html>

Open index.js and add the following code:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './index.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Open index.vue and add the following code:

<template>
  <div>
    <h1>Hello, Pinia!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
h1 {
  color: blue;
}
</style>

Now, open a terminal, navigate to your project directory, and install the required dependencies by running:

npm init -y
npm install vue@next @pinia/next

Once the dependencies are installed, you can start a local development server by installing a simple server package, such as
http-server. Run the following command in your terminal:

npm install -g http-server
http-server

Open your web browser and navigate to http://localhost:8080

1 reply

freatraum Jun 28, 2023
Author

Thank you for your reply. But it's still not quite what I wanted. It may be that I expressed it not clearly. I mean, only use Pinia and Vue in the form of importing js files. Now I have Vue.js but no Pinia .js. Is there any way to compile a Pinia .js?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to use Pinia in *.js env. without VUE Cli ? #2280

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to use Pinia in *.js env. without VUE Cli ? #2280

Uh oh!

freatraum Jun 27, 2023

Replies: 1 comment · 1 reply

Uh oh!

roma-marshall Jun 27, 2023

Uh oh!

freatraum Jun 28, 2023 Author

freatraum
Jun 27, 2023

Replies: 1 comment 1 reply

roma-marshall
Jun 27, 2023

freatraum Jun 28, 2023
Author