https://github.com/json-ms/sandbox-vue3
A Vue3 Sandbox JSON.ms version that comes fully configured to jumpstart your new project..
https://github.com/json-ms/sandbox-vue3
Last synced: 9 months ago
JSON representation
A Vue3 Sandbox JSON.ms version that comes fully configured to jumpstart your new project..
- Host: GitHub
- URL: https://github.com/json-ms/sandbox-vue3
- Owner: JSON-ms
- Created: 2025-05-01T12:15:22.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-01T12:41:04.000Z (about 1 year ago)
- Last Synced: 2025-05-17T05:13:03.845Z (about 1 year ago)
- Language: TypeScript
- Size: 42 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @jsonms/sandbox-vue3
## Installation
1. Clone the repository
```bash
git clone https://github.com/JSON-ms/sandbox-vue3.git
cd sandbox-vue3
```
2. Install dependencies
Using NPM
```bash
npm install
```
Using Yarn:
```bash
yarn
```
Open your browser and navigate to http://localhost:3000 (or the port specified in the terminal) to see your application in action.
## Connecting to JSON.ms
1. Create a JSON.ms account: Go to [JSON.ms](https://json.ms) and create an account if you don't have one.
2. Create a new JSON project: Prepare a new YAML structure and setup your endpoint to match your local JSON.ms handler endpoint (**not the one from this project**). Check the Integration panel on [JSON.ms](https://json.ms) for more information.
3. Synchronize your project with your local `/src/jms` folder.
4. Adjust `/src/plugins/jsonms.ts` to match your needs.
## Setup Environment Variables
1. Copy `.env.example` to `.env.development` and adjust with your settings.
## Running the Project
After installing the dependencies, you can run the development server:
Using NPM:
```bash
npm run dev
```
Using Yarn:
```bash
yarn dev
```
## Usage in Templates
Here's a complete example using content, markdown and files.
```ts
import { marked } from "marked";
import { useJsonMs } from "@/plugins/jsonms";
const { data, locale, getFilePath } = useJsonMs();
```
The `userJsonMs()` composable returns `data`, `locale` and `getFilePath`. You can use these variables to populate your views and display media content.
Here's a stripped-down example:
```vue
![]()
{{ data.default.title[locale] }}
```
A couple of things are worth noticing here:
1. Files must be loaded with `getFilePath`. Do not concatenate with a server address before since files are not always addresses, but sometimes in base64 format.
2. Multilingual data always end with the locale.
3. Data in markdown format must be parsed using a 3rd party library. In this case, we chose `marked` which does the job perfectly.
## Project Structure
The project structure is as follows:
```
sandbox-vue3/
├── public/ # Static assets
├── src/ # Source files
│ ├── components/ # Vue components
│ ├── views/ # Views for routing
│ ├── router/index.ts # Vue Router configuration
│ ├── jms/ # Synced files from json.ms
│ ├── plugins/jsonsms.ts # JSON.ms configurations
│ ├── App.vue # Main App component
│ └── main.js # Entry point
├── .gitignore # Git ignore file
├── index.html # Main HTML file
├── package.json # Project metadata and dependencies
└── vite.config.js # Vite configuration
```
## Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue.
## License
This project is licensed under the MIT License. See the LICENSE file for details.